Home/ Questions/Q 7869053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T01:11:35+00:00

how do i make column with bbb + ccc same height as aaa, ddd

  • 0

how do i make column with bbb + ccc same height as aaa, ddd columns ?

<html><body>
<div style="width:500px;height:500px;background-color:yellow">
 <div style="float:left;height:100%;background-color:green;">
  aaa
 </div>
 <div style="float:left;height:100%;background-color:#ff00ff">
  <div style='background-color:cyan;height:25px;'>
   bbb
  </div>
  <div style="background-color:gray;height:100%;">
   ccc
  </div>
 </div>
ddd
</div>
</body></html>

http://jsfiddle.net/WD94e/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’re looking to do is not exactly do-able in CSS without using a table. The next best thing you can do is make a “faux column”.

    http://jsfiddle.net/3wXv2/

    Updated HTML (took out inline CSS and added simple class names)

    <div class="wrap d">
    <div class="a">aaa</div>
    <div class="bc">
        <div class="b">bbb</div>
        <div class="c">ccc</div>
    </div>
    ddd
</div>

    CSS

    .wrap{
    width:500px;
    height:500px;
    background-color:yellow;
}
.a{
    float:left;
    height:100%;
    background-color:green;
}
/* This is a "Faux Column" */
.bc{
    float:left;
    height:100%;
    /*background-color:#ff00ff;*/
    /* This is the faux column, make it the same as "DIV.c" */
    background-color:gray; 
}
.b{
    background-color:cyan;
    height:25px;
}
.c{
    background-color:gray;
    /*height:100%; /* Don't Do this.  Need to "faux column" this */
}

    The “Trick” here is that the container “column” (Div.bc which is containing the stacking divs .b and .c) acts like “faux column” and it basically sort of tricks people into thinking that the background of “C” is actually extending but it’s not.

    You can read about Faux Columns from this excellent resource:

    http://www.alistapart.com/articles/fauxcolumns/

    The issue with “height:100%;” is that this declaration is NOT saying “stretch to the remaining height of the column”.

    It is saying “Make my height equal to 100% of the height of my parent!”.

    This means, it looks at the parent container (.bc in this case) and sets it’s height = to that height. If you look at your CSS, it shows .bc as having height 100% which does the same thing. It makes it’s height = .wrap which is set to 500px.

    So… column “.c” is set to 500px, not “500px – whatever else is in the column”, because CSS just doesn’t work that way by it’s rules.

    Of course, this will probably break if you happen to have content in “div.c” that is higher than the remaining column height.

    I hope that helps.

    Cheers!

    • 0