Fotiman
msg:4477275 | 8:14 pm on Jul 19, 2012 (gmt 0) |
Add this to your .container styles:
overflow: auto;
|
topr8
msg:4477277 | 8:23 pm on Jul 19, 2012 (gmt 0) |
thanks so much!
i wish i'd know that 2 years ago!
|
lucy24
msg:4477289 | 9:08 pm on Jul 19, 2012 (gmt 0) |
Eeuw. Wouldn't that give you a scroll bar? What happens if you set a min-height on the container?
| the indentation of the code seems to be lost! |
|
If you make the post in a
text editor
you can globally replace
leading spaces
with non-breaking spaces ;)
Either "code" or "pre" ought to work the same way, but it seems to depend on the whim of the moment.
|
Paul_o_b
msg:4477317 | 10:20 pm on Jul 19, 2012 (gmt 0) |
Eeuw. Wouldn't that give you a scroll bar? What happens if you set a min-height on the container?
|
|
min-height is of no real use because content may be variable height.:)
Overflow (other than visible) creates a new "block formatting context" and will then automatically contain child floats. You will not get a scrollbar unless the content inside is too big. In most cases you can use overflow:hidden to better effect or use the revised clearfix method (google it).
As a matter of interest overflow isn't the only property that will automatically contain floats it is any property that creates a new block formatting context. Which are as follows (taken directly from the specs):
"Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents."
Overflow (other than visible)is the most useful for containing floats but only when you don't need visible overflow. If you need visible overflow then use the clearfix method or indeed float the parent if the design allows.
Note that IE7 and under just need haslayout to contain child floats so they need an extra rule suh as the proprietary zoom:1.0 or perhaps more validly a dimension where possible.
|
Fotiman
msg:4477327 | 10:34 pm on Jul 19, 2012 (gmt 0) |
No, that would not give you a scroll bar, as you can see here:
[jsfiddle.net...]
|
stever
msg:4477383 | 4:24 am on Jul 20, 2012 (gmt 0) |
<p class="clearer">
another logo here and so on .....
</p>
****************
.clearer {
clear:both;
}
****************
in this case.
Otherwise, <div class="clearer"></div> in an appropriate position.
|
Paul_o_b
msg:4477552 | 4:13 pm on Jul 20, 2012 (gmt 0) |
Although a valid technique (and we all used to used empty clearer divs in the "olden days") there really isn't any need these days to clutter up your nice clean html mark up with empty divs.:) The empty clearer div should be consigned to history along with the spacer image.
|
|
