CODEWITHSUNDEEP
htmlcss
S Raihan
S Raihan

Reputation: 387

Css Height issue

I have having some problem or may be I don't Know the Way to Do this :

What I have now

I have a Main Div and Under this div I have Two div . One is Blue and another is Gray . Main Div has min-height and Gray div has many Content in it . Blue Content has less content .

What I want

Is this possible if the Gray div height increase also Blue Div height increase with it . Means both Height will be same .

Live Js fiddle Demo: http://jsfiddle.net/saifrahu28/y6uRx/1/

HTML

<div style="width:200px; min-height:100px; background:#ccc;">
<div class="Gray">
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>

</div> 

<div class="Blue">
    this is Blue <br/>
</div>

CSS

.Gray{
width:100px; min-height:200px; background:#333; float:left;
 }

.Blue{
width:50px;  background:#3b3ff5; float:left;
}

Upvotes: 0

Views: 102

Answers (5)

User45
User45

Reputation: 74

If I have understand your problem correctly then it might solve your problem

.Gray{
    width:100px; background:#333; float:left;
}

.Blue{
    width:50px;  background:#3b3ff5; float:left;
}
.Gray, .Blue {
     min-height: 150px;   
}

Upvotes: 0

Lepidosteus
Lepidosteus

Reputation: 12037

An easy way to do this is to put overflow: hidden on the overall container (light gray in your fiddle), and then force the blue box to have a fake padding at the bottom with margin-bottom: -99999px; padding-bottom: 99999px; and let the non-fixed size box (gray) determine the actual size.

See this fiddle: http://jsfiddle.net/y6uRx/9/

This will work in every browser (including older IE).

A lot more info on several ways to do what you want in this article: Fluid Width Equal Height Columns

If you can change your code to use one of the "cleaner" one listed there instead, go for it.

Upvotes: 4

Raccoon
Raccoon

Reputation: 1427

http://css-tricks.com/fluid-width-equal-height-columns/

This one gives you several different ways to do it. Go and see if there's one that fits you.

Upvotes: 2

GuiGreg
GuiGreg

Reputation: 341

Try to use display:table; and height:100%; on both div.

Upvotes: 0

rink.attendant.6
rink.attendant.6

Reputation: 46218

You can use CSS tables, however you'll need to enforce your greatest min-height on the main div.

CSS

#main {
    display: table;
    width: 200px;
    min-height: 100px;
    background:#ccc; 
}

.Gray {
    width:100px;
    min-height:200px; /* this won't work here */
    background:#333;
    display: table-cell;
}

.Blue {
    width:50px;
    background:#3b3ff5; 
    display: table-cell;
}

HTML

<div id="main">
    <div class="Gray">
        this is Gray <br/>
        this is Gray <br/>
        this is Gray <br/>
        this is Gray <br/>
        this is Gray <br/>
        this is Gray <br/>
        this is Gray <br/>
        
    </div> 
    
    <div class="Blue">
        this is Blue <br/>
    </div> 
   
</div>

See http://jsfiddle.net/XzU7r/1/

Upvotes: 1

Related Questions