Divs fold around the title bar.
I have several 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> - shell style:
width: 780px; margin: 20px auto; border: solid black 5px;width: 780px; margin: 20px auto; border: solid black 5px; - header style:
position: relative; min-height: 125px;position: relative; min-height: 125px; - body style:
position: relative; - content style:
position: absolute; left: 50px; top: 0px;position: absolute; left: 50px; top: 0px;
I have a bunch of html elements in a content div, and for some reason, the divs of the body and div wrappers are wrapped around the header, and the content of the div hangs on my own if I don't set a fixed height for the body div. The only float elements that I have are in the header.
EDIT
If I delete the contents of the div (and delete the html elements directly in the body), the div body will no longer collapse! Trying to understand why - suppose this is due to the position: the absolute content of the div.
Is there a clue why this is happening and how to solve it?
I considered this question , but it does not seem to work for me (or maybe I am cleaning it in the wrong place ...).
In this case, you do not have to use absolute or relative positioning.
Below you will get what you need, with a minimum number of css-disputes.
Colors, because I like the color, and you need it too!
<!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> Try it. Note: the overflow hidden in the div header solves the need to clear the div. Note why you use relative + absolute positioning for content. This is better handled with imho fields.
<html> <head> <title>Layout</title> <style type="text/css"> #wrapper { width: 780px; margin: 20px auto; border: solid black 5px; } #header { overflow: hidden; background-color: yellow; } #header div { float: right; border: 2px solid red; } #body { position: relative; } #content { position: absolute; left: 50px; top: 0px; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div>One</div> <div>Two</div> <div>Three</div> </div> <div id="body"> <div id="content"> <p>This is some text</p> </div> </div> </div> </body> </html> I use this style to clean items:
.Clear { clear: both; height: 0; overflow: hidden; } Put a clearing div in the header to get the size of the title element:
<div id="wrapper"> <div id="header"> <!-- a bunch of float divs here --> <div class="Clear"></div> </div> <div id="body"> <div id="content"> <!-- a bunch of html controls here --> </div> </div> </div> Setting the height of the clearing element to zero causes it to not occupy space on its own. The overflow style is such that IE will not give it a height, although the height is set to zero. IE has the strange idea that each element must be at least one character, setting overflow: hidden; keeps the height at zero, although the content of an element in IE has one character.
If you want #content to appear within the borders of the #wrapper borders, try this replacement for size, after removing position:relative from #body (or completely removing the DIV):
#header{position: relative; overflow:hidden; clear:both;} #content{position:relative; left:50px; top:0px;} This way you can see that #content is displayed inside the wrapper, but below #header.
It can happen, because for #content there really is nothing to stick out from under. #header, when it was set as relative, the view disappears for the lower level, even if #body was then set as absolute, and its descendants were relative.
Changing #content from position:absolute to position:relative will cause it to fall under the previous DIV, which in this case was #header.
Try to clear after your floating elements inside the header.
<div id="wrapper"> <div id="header"> <!-- a bunch of float divs here --> <div style="clear:both;"></div> <!-- Or use a clearfix... --> </div> <div id="body"> <div id="content"> <!-- a bunch of html controls here --> </div> </div> </div> While the cleansing element is inside the containing div, it should do what you want.
Add the "clear: both" style to your div with the identifier body. You can also add a div with this style immediately after the "link with floating divs" and before closing the div title tag.
If you want to clear something, you also need to swim with this element for it to work correctly. Therefore you will need.
#header { clear: both; float: left; } #body { clear: both; float: left; } I'm not a fan of using "clear: both" unless it's absolutely necessary. The best solution is to set the “overflow” property of the collapsing DIV to “auto”.
Try something like:
#header { float: left; overflow: auto; }