CODEWITHSUNDEEP
csscss-float
Wazan
Wazan

Reputation: 539

Css issue div height when using float

I have a div area like this:

<div class="con">
    <div class="container"></div>
    <div class="sidebar"></div>
</div>

And CSS:

.con{
    width:100%;     
}
.con .container{
    width:70%;
    min-height:500px;
    float:left;
    background:#f00;

}
.con .sidebar{
    width:30%;
    min-height:500px;
    float:right;
    background:#ccc;

}

The container and sidebar class heights are dynamic. When one of these class heights increases, class con also has to increase. But my problem is class con height is always 0, I can't seem to give the con class a static height.

Upvotes: 5

Views: 9747

Answers (5)

jonazz
jonazz

Reputation: 41

You can use like..

.con{display: table;}

Upvotes: 0

Taig
Taig

Reputation: 7278

Add overflow: auto; to .con:

.con {
    width: 100%; 
    overflow: auto;    
}

Upvotes: 6

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

try this 

.con{
    width:auto; 
    overflow: auto;
    margin:0 auto;    
}

Upvotes: 0

Harshit Tailor
Harshit Tailor

Reputation: 3281

use clear class

<div class="con">
    <div class="container"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

.clear
{
   clear:both;
}

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191729

I'm not sure why it matters why .con does not extend in height, but this is a pretty infamous problem. Add overflow: hidden to .con. If that does not work, put <br style="clear: both;"> after the tag.

Upvotes: 0

Related Questions