6

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

4 Answers 4

23

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.

2
  • By far the most elegant solution I found to the problem. Thanks! Jun 23, 2013 at 10:25
  • Great answer and with a pithy rule of thumb to boot! Thank you. Feb 15, 2018 at 22:23
6

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

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

Demo

0
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.