The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/ .container div { display: inline-block; } Do note its limitations though: There is a additional space after the first bloc – this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. … Read more
Add the following property: .c{ … overflow: hidden; } This will force the container to respect the height of all elements within it, regardless of floating elements. http://jsfiddle.net/gtdfY/3/ UPDATE Recently, I was working on a project that required this trick, but needed to allow overflow to show, so instead, you can use a pseudo-element to … Read more
Here’s the part of the linked answer that’s most relevant to your question: When you float a block element, you are telling the browser to position it next to the previous floated object, so long as the container is wide enough (otherwise it will drop below the previous object). As the author mentions this is … Read more
div#container { height: 275px; width: 1000px; overflow: auto; white-space: nowrap; } div#container span.block { width: 300px; display: inline-block; } The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.
This works good for me. I have divided the screen into two halfs: 20% and 80%: <div style=”width: 20%; float:left”> #left content in here </div> <div style=”width: 80%; float:right”> #right content in there </div>
display: table-cell is perfectly fine to use, with just one downside.. It doesn’t work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table If you don’t need to support IE7, then feel free to use it. IE7 still has some usage, but you should check your Analytics, and then make a decision. To answer your specific … Read more
Because you establish a new Block Formatting Context when using overflow with anything ofther then visible (link to the w3.org specs).
You can set the outerdiv‘s CSS to this #outerdiv { overflow: hidden; /* make sure this doesn’t cause unexpected behaviour */ } You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not … Read more
Position the outer div however you want, then position the inner divs using absolute. They’ll all stack up. .inner { position: absolute; } <div class=”outer”> <div class=”inner”>1</div> <div class=”inner”>2</div> <div class=”inner”>3</div> <div class=”inner”>4</div> </div>
You can use the clearfix to do “layout preserving” the same way overflow: hidden does. .clearfix:before, .clearfix:after { content: “.”; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* IE < 8 */ add class=”clearfix” class to the parent, and remove overflow: hidden;