Menu
I have a few nested divs:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
width: 780px; margin:
20px auto; border: solid black 5px;
position: relative;
min-height: 125px;
position: relative;
position: absolute;
left: 50px; top: 0px;
I have a bunch of html elements in the content div and for some reason the body div and the wrapper div are collapsing around the header and the content div hangs out on its own if I don't set a fixed height for the body div. The only float elements I have are in the header.
EDIT:
If I remove the content div (and drop the html elements directly in body) the body div stops collapsing! Trying to understand why - guess it's due to the position: absolute of the content div.
Any clue why this is happening and how to solve?
I had a look at this question but It doesn't seem to work for me (or maybe I am clearing inthe wrong place...).
606
You don't really need to use absolute or relative positioning in this case.
The following achieves what you need with a minimal amount of css wrangling.
Colours becuase I like colour, and so should you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
#wrapper {
width: 780px;
margin: 20px auto;
border: solid black 5px;
}
#header {
min-height: 125px;
overflow:hidden;
}
#body {
background-color:red;
}
#content {
margin-left: 50px;
margin-top: 0px;
background-color:pink;
}
.floatie { float:left; width:40px; height :40px;
margin:5px; background-color:#fe0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
</div>
<div id="body">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
