Search code examples
htmlheightparent

columns ignore height of it's parent

The problem is that the parent div should respect the text height of both columns (#col1 and #col2, each using float:left). However, parent's height property (#content) acts like no text is written inside.

Code: http://jsfiddle.net/Arkl1te/UWNaT/

I could insert a fixed height, but it shouldn't work like that: height should have a "flexible" value, even with text.

Solution

  • As the children are floating you have 2 options:

    Add overflow: hidden; to the parent to respect the height of the children:

    #content{
  overflow: hidden;
}

    Add an empty element with clear:both as the latest element:

    <div id="content">
 <p id="col1">...</p>
 <p id="col2">...</p>
 <div style="clear:both;"></div>
</div>