CODEWITHSUNDEEP
htmlcss
user2952265
user2952265

Reputation: 1630

Parent div ingnores height of child because of its float

The parent height is set to auto but does not grow, because the child div has a float to the left. What is happening here, how can I fix it?

js fiddle

HTML

<div class="wrap">
   <div class="content">....</div>
 </div>

CSS

.wrap{
background: blue;
width:600px;
height: auto;
border: solid 3px;
}

.content{
background: red;
width:200px;
padding: 10px;
height: auto;
float: left;
 }

Upvotes: 0

Views: 83

Answers (5)

Pbk1303
Pbk1303

Reputation: 3802

You can either add overflow:auto to your wrap div

or clear the floats.

Solution 1:

HTML:

<div class="wrap">
   <div class="content">....</div>
 </div>

CSS:

.wrap{
    background: blue;
    width:600px;
    height: auto;
    border: solid 3px;
    overflow:auto;
}

SOLUTION 2:

<div class="wrap">
   <div class="content">....</div>
   <div class="clr"></div>
</div>

CSS:

.clr
{
clear:both;
}

Please refer the below link for better understanding: Clearing floats

Upvotes: 2

Vincent Duprez
Vincent Duprez

Reputation: 3882

You could change the overflow parameter but this impacts the overflow behaviour. Using floats goes together with a clear:all div, it's like tracing a imaginative line under your flatings to start over on a new line.. some kind of line break but for the floats... Add a last sibling div with style clear:both

<div class="wrap">
   <div class="content">....</div>
   <div style="clear:both"></div>
 </div>

http://jsfiddle.net/Xksbs/6/

Upvotes: 2

Syed Sajid
Syed Sajid

Reputation: 1410

Just like Vincent Durpez said, and here you can see the

js fiddle [http://jsfiddle.net/Xksbs/5/]

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

There's nothing wrong in setting float left to the child, You have to just add overflow:hidden to the parent div to achieve your need

http://jsfiddle.net/Xksbs/4/

Upvotes: 1

GluePear
GluePear

Reputation: 7735

Add overflow:auto; to the parent <div>: JSFiddle

Code: 

.wrap{
    background: blue;
    width:600px;
    height: auto;
    border: solid 3px;
    overflow:auto;
}

Upvotes: 1

Related Questions