Home/ Questions/Q 156795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T10:23:24+00:00

I have a few nested divs: <div id=wrapper> <div id=header> <!– a bunch of

  • 0

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>
  • wrapper style: width: 780px; margin: 20px auto; border: solid black 5px;
  • header style: position: relative; min-height: 125px;
  • body style: position: relative;
  • content style: 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…).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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>
    • 0