1

I have the following DIVs structure:

<div id="d1">
    <div id="d2">
    </div>

    <div id="d3">
        <div id="d4"></div>
        <div id="d5"></div>
    </div>
</div>

DIV d2 is the left column (float: left), while d3 is on the right (float: right). d4 and d5 all go into right column d3, one below the other. The widths are all fixed.

DIVs d4 has fixed height of 300px. The content of div d2 has dynamic height but it is at least 300px high. My goal is to make DIV d5's height to fill the remaining space in the right column (d3) so that the total height of this column is equal to the dynamic height of the left column (d2).

I would like a pure CSS solution, no JS.

This is the CSS I am using:

#d1 {
  width: 990px;
  border: 1px solid black;
  background-color: pink;
}

#d2 {
  float: left;
  width: 300px;
  background-color: yellow;
}

#d3 {
  float: right;
  width: 690px;
}

#d4 {
  background-color: blue;
  width: 690px;
  height: 300px;
}

#d5 {
  background-color: brown;
  width: 690px;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
AtomHeartFather
  • 954
  • 17
  • 35

2 Answers2

3

You can use display: tale; and table-cell; with a heightof 100% on d5.

#d1 {
  width: 990px;
  border: 1px solid black;
  background-color: pink;
    padding: 3px;
  display: table;
    height: 10000px;
}

#d2 {
  display: table-cell;
  width: 300px;
  background-color: yellow;
}

#d3 {
  display: table-cell;
  width: 690px;

}

#d4 {
  background-color: blue;
  width: 690px;
  height: 300px;
}

#d5 {
  background-color: brown;
  width: 690px;
  height: 100%;
}

http://jsfiddle.net/nnjse/1/

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • Thanks for your answer, but d5 still does not fill the remaining space after I added some content to d2. What I want is that d3 column be as high as d2 (dynamic height according to content). height: 100% on d5 seems to have no effect. Look here: http://jsfiddle.net/alikasundara/pYq9S/ – AtomHeartFather Nov 14 '11 at 14:03
0

Add to main block #d1 border-right 690px and using negative margin -690px put right column #d3 over it. Border will look like right column's background. If #d2 gets higher #d1's border will make illusion that right column fills whole parent height. The same principle with negative margins but in vertical direction can be used for #d4 and #d5.

#d1{
    width:300px;
    margin:0 auto;
    border-right:690px solid #a52a2a;
    background:#ffff00;
}
#d2{
    width:300px;
    float:left;
}
#d3{
    width:690px;
    float:right;
    margin-right:-690px;
    border-top:300px solid #EEE;
    background:#a52a2a;
}
#d4{
    height:300px;
    margin-top:-300px;
    background:#0000ff;
}
#d5{
    height:100%;
}
Babur Ussenakunov
  • 1,995
  • 2
  • 16
  • 16