I'm making a 2-column layout with divs.
It should be something like this: http://dl.dropbox.com/u/4976861/html-demo.html
But there is a problem. If content stretches the side blocks vertically, the left blocks shift downwards: http://dl.dropbox.com/u/4976861/html-demo-2.html
If I put the sidebar into a wrapper div, it works fine, but it will make the code quiet messy because of the paddings and some background issues which I removed to simplify the demo, so I would like to leave this option for now.
I don't think that you're going to be able to produce the results that you would like without changing the underlying HTML. You're trying to allow elements to flow (both vertically and horizontally) within the page, but the order in which you have the elements is not going to allow this.
I might be teaching you to suck eggs, but my preference for the HTML output would be something like this:
<div class="wrap">
<div class="column1">
<div>left 1</div>
<div>left 2</div>
<div>left 3</div>
</div>
<div class="column2">
<div>right 1</div>
<div>right 2</div>
</div>
</div>
Put this under the 2 divs:
<div style="clear:both;"></div>
Related
So i'm using flexbox grid and have a basic something like this:
<div class="container">
<div class="row">
<div class="sidebar col-xs-3">
<div class="sidebar-top"></div>
<div class="sidebar-space"></div>
<div class="sidebar-bottom"></div>
</div>
<div class="content col-xs-9">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
</div>
</div>
And generally looks something like this:
Now I need the top green bar to follow down when the scroll and the bottom green bar to stick to the bottom of the visible page. The center place that says hey, may or may not ever have content in it.
I have tried quite a few things, mostly taken from the css-tricks site about flex and other various blog posts, but none seems to satisfy what I need. If I add a wrapper around the sidebar-top/space/bottom and set it to a column instead of row it no longer gets the equal height that .sidebar and .content have. Nothing seems to work.
Is this even possible with pure css?
edit: The relevant css classes container row and col-xs-X are all from flexbox grid linked at top of question
Here is my Bootstrap 3 jsFiddle, although you'll likely need to view it in full screen view in order to see it in all its glory.
As you can see, there are two TB3 "wells" called Herps and Derps. They are currently sitting on top of one another, and furthermore, they are wider than the navbar, jumbotron and footer wells.
I'd like these to both be next to each other on the same line/"row", and I'd like the two wells to be the same width of all the other contents. I'd also like to have a bit of padding (spacing) between the two wells so that they're not smushed right up next to each other.
My best attempt (from that jsFiddle above):
<div class="row">
<div class="span6">
<div class="well">Herps</div>
</div>
<div class="span6">
<div class="well">Derps</div>
</div>
</div>
...does not seem to be doing the trick. Any ideas where I'm going awry?
You need to use the col-x-y css styles for your wells for the appropriate screen size and columns. In this case, you could use col-sm-6 since you have two columns.
<div class="row">
<div class="col-sm-6">
<div class="well">Herps</div>
</div>
<div class="col-sm-6">
<div class="well">Derps</div>
</div>
</div>
JSFiddle
Bootstrap Grid System
wanna know is there a way to do this:
<div class="booth">
<div class="part">Part 1</div>
<div class="part">Part 2</div>
<div class="part">Part 3</div>
<div class="part">Part 4</div>
</div>
Using the :hover on css i expand the size of an inner div to a height:100% width:100% from the .booth class. I have the problem that the title of each part is visible over the full size.
it's difficult to explain...i know, and my english is not good....
I think your taking about having either of the 4 div expand to the full size of the parent div and overlap the other child divs. I would try using the z-index property on the "part" class instead of the booth to resolve it.
On a JSP page, we have displayed a tree like structure using nested divs.Width of each div is calculated at run time. Only width of "div1" is given at runtime and other div's width is calculated using this at run time.Here, I have set it to 200px.
<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto">
<div id="div2" style="background-color:yellow;height:200px;width:190px;">
<div id="div3" style="background-color:blue;height:180px;width:180px;"></div>
<div id="div4" style="background-color:red;height:180px;width:50px;"></div>
</div>
</div>
Now the issue is "div4" is not getting appended in the right of "div3". It is getting placed in next line. Because of that tree structure is getting disturbed. And if I increase the width of "div2" then it is placed in the right but then horizontal scroll bar is coming for all cases where it is not required.
I have noticed the behavior of div that it place text vertically rather than horizontally.
Any idea how can I make it work?
Is this what you had in mind? I created a jsfiddle: http://jsfiddle.net/r6sPY/
Div4 will never get appended to the right of div3 as long as the width of div2 will be smaller than the sum of div3 and div4. But then again, I am not sure if this is what you had in mind.
<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto">
<div id="div2" style="background-color:yellow;height:200px;width:190px;">
<div id="div3" style="background-color:blue;height:180px;width:130px;float:left;"></div>
<div id="div4" style="background-color:red;height:180px;width:50px;float:left;"></div>
</div>
</div>
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.