Question

I have this simple html structure:

<div id="mainbody">
  <div id="main">
  ...
  </div>
  <div id="left">
  ...
  </div>
</div>
<div id="footer">
...
</div>

The div “mainbody” has position:relative.
The div “left” has absolute position at the left side of the page and dynamic height.
The div “main” floats left at the right of div “left”.

CSS:

#mainbody {
    position:relative;
}
#left {
    position:absolute;
    width:250px;
}
#main {
    float: left;
    margin-left: 260px;
    width:80%;
}

PROBLEM: The height of div “left” is ignored and the div “footer” starts where the div “main” ends even though the div “left” has bigger height than div “main”.

Answer 1

What you are looking for is a clearfix so that your elements will load properly. See the linked SO question “Which method of ‘clearfix’ is best?” for numerous possible clearfixes.

The reason why the footer element places itself next to the main element is because absolutely-positioned elements are removed from the page flow. As a result, later elements treat the absolutely-positioned element as if it was not there in the first place. With a clearfix, this issue is resolved.