I would like to create a, browser centered, bordered, wrapper that autoexpands in height around various divs. When using floats to keep the divs in-line, the wrapper just st
You need to add an element with clear:both
after the div
s.
Demo
You can add something like <br style="clear:both" /> as the last element in your wrapper to force it to wrap around your elements that are outside the content stream.
<div id="wrapper">
<div id="header">test header</div>
<div id="navbox">test navbox</div>
<div id="column1">test column1</div>
<div id="column2">test column2</div>
<br style="clear:both" />
</div><!--Close_wrapper-->
I would use the :after psuedo class like below. It seems a bit more obvious what is supposed to happen and a bit less like browser weirdness. I'm sure not that overflow solution is officially supposed to work.
#wrapper:after {
clear:both;
display: block;
content: " ";
}
The answer to questions that contain float
and wrap
in one sentence is usually
overflow: auto
:)
If you want your wrapper to auto-expand in height, that should do it.