CODEWITHSUNDEEP
htmlheightparent
Fabián
Fabián

Reputation: 575

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.

Upvotes: 0

Views: 29

Answers (1)

Jonathan Naguin
Jonathan Naguin

Reputation: 14776

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>

Upvotes: 1

Related Questions