Have blocks fill 100% in equal columns

HTML & CSS
1

Hey,
I can’t think of possible way to solve this one, so I want to ask the CSS gurus out there for an advice:
I have 2 equal columns, no biggie I’ve done this before thanks to Matthew.

Problem is that this time the columns are made of several boxes each. So there is no single column that has a background color and that’s it, I need to actually make sure the child elements fill 100% height.

Here is a brief description in code (I didn’t implement Matthews method to avoid confusion, just presented the structure):


<div id="container">
   <div id="sidebar">
      <div class="box">login goes here</div>
      <div class="box stretching">news go here</div>
      <div class="box">ad goes here</div>
   </div>
   <div id="main">
      <div class="box stretching">content goes here</div>
      <div class="box">footer goes here</div>
   </div>
</div>

I think a good way would be to designate one box in each column as the “stretching” box, and have it stretch to 100%, other boxes will have fixed height and positioned absolutely in the padded areas of the columns.

But the containers stretch to fit the content, so a child element with 100% height just wont fill the gap.

Please help :confused:

2

How many column colors do you want here?

3

The 2 columns themselves have no background colors, the blocks that fill the columns do.

4

The main issue is height:100% requires parent element to have specified height. But you can’t have an element with specified height expanding to fit content.

If there’s was a way to override that, than it would be possible. But since percentage height requires parent height to be specified we need a different approach.

5

You could just throw in the towel and use JavaScript, if all else fails.

6

As much as I hate this, it looks like that is what I’ll have to do.

I wish there was a better solution to that.

7

I am having a problem visualizing what you are trying to achieve. are you saying you want the CHILD blocs to be 100% height total for each column??

8

Yes. But i think it is best that only one of them should be liquid.

9

Ok, am still a bit lost ( am thinking VERTICALLY)

you can assign the colors you need, and the LAST CHILD would match the color of its parent container. at that point the illusion of equal height columns would not be broken.

<div id=“container color1”>
<div id=“sidebar”>
<div class=“box”>login goes here</div>
<div class=“box stretching”>news go here</div>
<div class=“box color1”>ad goes here</div>
</div>
<div id=“main color2”>
<div class=“box stretching”>content goes here</div>
<div class=“box color2”>footer goes here</div>
</div>
</div>

10

Hi,

As Dresden said above you can colour the top blocks or rub out the background and the the last box shows the background to the bottom.

Here’s a very rough mock up code below (using my absolute column technique) to show a similar method.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal columns - Including IE6</title>
<style type="text/css">
.row {
    width:600px;
    position:relative;
    float:left;
    clear:left;
    margin:0 0 10px;
}
.row p {
    margin:0px 0 10px;
    height:100px;
    background:red;
}
/* .box cannot be position:relative or this won't work */
/* use an inner if stacking context needed but leave .bg outside */
.box {
    width:150px;
    margin:0 50px 0 0;
    display:inline;
    float:left;
}
/* if you don't want an inner then use this instead
.box * {
    position:relative;
    z-index:2;
}
*/
.inner {
    position:relative;
    z-index:2;
    width:150px;
}
.inner div {
    background:#fff;
    padding:1px 0 10px;
    width:150px;
}
.inner div.last{padding-bottom:0;}
.box .bg {
    width:150px;
    background:red;
    position:absolute;
    top:0;
    bottom:0;
    z-index:1;
}
.inner .bg2 p,.row .box .bg2{background:blue}
.inner .bg3 p,.row .box .bg3{background:green}
</style>
<!--[if lte IE 6]>
<style type="text/css">
* html .row{overflow:hidden}
* html .box .bg{
    top:auto;
    bottom:0;
    height:999em;
}

</style>
<![endif]-->
</head>
<body>
<div class="row">
    <div class="box">
        <div class="inner">
            <div>
                <p>test</p>
            </div>
            <div>
                <p>test</p>
            </div>
            <div class="last">
                <p>test</p>
            </div>
        </div>
        <div class="bg"></div>
    </div>
    <div class="box">
        <div class="inner">
            <div>
                <p>test</p>
            </div>
            <div>
                <p>test</p>
            </div>
            <div>
                <p>test</p>
            </div>
            <div>
                <p>test</p>
            </div>
            <div>
                <p>test</p>
            </div>
            <div class="last bg2">
                <p>test</p>
            </div>
        </div>
        <div class="bg bg2"></div>
    </div>
    <div class="box">
        <div class="inner">
            <div>
                <p>test</p>
            </div>
            <div>
                <p>test</p>
            </div>
            <div class="last bg3">
                <p>test</p>
            </div>
        </div>
        <div class="bg bg3"></div>
    </div>
</div>
</body>
</html>
11

OK, I came up with a technique (while making breakfast),
I’ll post a link when I test it, and then go through details on how I’ve done it.
Stay tuned… :wink: