Css Height issue

Question

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;
}

What you want are equal height columns, which [there is much information on StackOverflow for](http://stackoverflow.com/search?q=equal+height+columns+[css]) — ScottS, Jun 28 '13 at 17:55
Possible duplicate of [How do I keep two divs that are side by side the same height?](http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height). This one perhaps would be the best to reference. — ScottS, Jun 28 '13 at 17:56

Lepidosteus · Accepted Answer · 2013-06-28T18:03:09.907

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.

score 2 · Answer 2 · answered Jun 28 '13 at 17:57

2

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.

answered Jun 28 '13 at 17:57

Raccoon

1,367
4
22
45

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

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/

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 28 '13 at 17:52

rink.attendant.6

44,500
61
101
156

is this cross browse Supported ? – S Raihan Jun 28 '13 at 17:54
CSS tables are supported by all modern mobile and desktop browsers. As for IE, it's been supported since IE 8. Reference: http://caniuse.com/#feat=css-table – rink.attendant.6 Jun 28 '13 at 17:55
Seems like IE7 / IE6 don't support 'display:table-cell'. – Raccoon Jun 28 '13 at 17:55

score 0 · Answer 4 · answered Jun 28 '13 at 17:56

0

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

answered Jun 28 '13 at 17:56

GuiGreg

341
1
8

Table cells will automatically expand to 100% of the parent table, no need for `height: 100%`. – rink.attendant.6 Jun 28 '13 at 17:58

score 0 · Answer 5 · answered Jun 28 '13 at 18:39

0

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;   
}

answered Jun 28 '13 at 18:39

User45

74
1
10

Css Height issue

5 Answers5

CSS

HTML