CODEWITHSUNDEEP
cssheight
mal200
mal200

Reputation: 389

CSS DIV Height 100%

I have 3 divs in a wrapper. one of this divs contains my content class="cont" this div has a dynamic height. The other divs navi-left and und navi right should have a hight like div cont. i have tried this but it dont work. can you help me please?

<div style="width:400px;">
    <div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
    <div class="cont" style="width:80px; height:80px; background:blue;"></div>
    <div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>

Upvotes: 0

Views: 510

Answers (1)

PassKit
PassKit

Reputation: 12591

If you are looking for a fluid 3 colum layout of equal height, then check this 'holy grail' post.

In order for a percentage height to trigger, the height of the parent should be known. Also, your DIVs should be displayed inline if you want them to all show on the same row.

<div style="width:400px;height:80px;">
    <div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
    <div class="cont" style="width:80px; height:80px; background:blue;"></div>
    <div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>

CSS

div {display:inline-block;}

Fiddle: http://jsfiddle.net/qvepX/

Upvotes: 1

Related Questions