Wrapper question when containing floating divs

Question

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 stops after the first div. Be kind, this may or may not be right way to do this but that's why I'm here.

Here is a simple example.

<head>

<style type="text/css">
<!--
#wrapper {
height: 100%;
width: 800px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
height: 100px;
width: 800px;
}
#column1 {
width: 300px;
height: 400px;
float: left;
}
#column2 {
height: 400px;
width: 300px;
float: left;
}
#navbox {
float: left;
width: 200px;
height: 400px;
}
-->
</style>

</head>

<body>

<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>

</div><!--Close_wrapper-->
</body>
</html>

score 22 · Answer 1 · answered Jan 15 '10 at 16:32

22

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.

answered Jan 15 '10 at 16:32

Pekka

442,112
142
972
1,088

By far the most elegant solution I found to the problem. Thanks! – nunespascal Jun 23 '13 at 10:25
Great answer and with a pithy rule of thumb to boot! Thank you. – texas-bronius Feb 15 '18 at 22:23

score 6 · Answer 2 · answered Jan 15 '10 at 16:37

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-->

score 4 · Answer 3 · answered Jan 15 '10 at 16:34

4

You need to add an element with clear:both after the divs.

Demo

answered Jan 15 '10 at 16:34

SLaks

868,454
176
1,908
1,964

score 3 · Answer 4 · answered Jul 22 '13 at 11:03

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: " ";
}

Wrapper question when containing floating divs

4 Answers4

Linked