Height of absolute-positioned div is ignored

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".

must see CSS as well to accurately answer. – Scott Feb 12 '12 at 00:08 — Scott, Feb 12 '12 at 00:08

score 3 · Answer 1 · answered Feb 12 '12 at 00:06

You need to add a clear after floated elements if you do not want following elements to be affected.

This can be achieved two ways:

Add css clear:both or clear:right to a following element. (such as a after div#left. Or to #footer.
Add overflow:auto to div#mainbody

BTW if you want more specific or accurate answers, I suggest you include both your html and css.

score 3 · Accepted Answer · edited May 23 '17 at 12:31

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.

Height of absolute-positioned div is ignored

2 Answers2