height: 100% - cannot get this to work

[chrisjb]

I have a wrapper with two columns using float: left to align them and a clear: both on an hr tag underneath them. When I used to work in html 4.0 this method used to work allowing the background images in the div of each column to stretch to the same height. However the clear: both doesn't seem to work in XHTML 1.0 strict (unless I'm just doing something wrong).

If anyone would be kind enough to take a look it would be hugely appreciated. If you know what you're doing you'll probably see my errors quickly.

I'm using these styles:

html { min-height: 100%; }

body {
    margin: 0px;
    padding: 0px;
    background-image: url(images/autumn/body_bg.gif);
    text-align: center;
    height: 100%;




}
#wrapper {
    margin: 0px auto;
    padding: 0px;
    width: 800px;
    background-color: #CCCCFF;
    background-image: url(images/autumn/right_col_bg.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 100%;




}
#content-area {
    margin: 0px;
    padding: 0px;
    width: 552px;
    text-align: center;
    float: left;
    background-image: url(images/autumn/content_bg_slice.gif);
    background-repeat: repeat-y;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333366;
    min-height: 100%;

}
#content-area-top {
    background-image: url(images/autumn/content_area_top.gif);
    margin: 0px;
    padding: 0px;
    height: 20px;
    width: 552px;
}
#right-col {
    background-image: url(images/autumn/right_col_bg.gif);
    background-repeat: repeat-y;
    margin: 0px;
    padding: 0px;
    width: 248px;
    text-align: center;
    background-color: #333366;
    color: #CCCCFF;
    float: left;
    height: 100%;



}

As it is the left column - content-area - does not stretch to 100% screen height. As you can see I've got the background image for the right column in the wrapper so that when the left column is longer than the right they both stretch to 100% and that is how I want it. But when the right column content is longer than the left column the left column background image stops where the content stops.

I'm not sure if I'm allowed to post url's but this will probably help:

http://www.ukmortgageinfo.com

Any suggestions?

Thanks in advance.

[zippee]

The 100% height is always refer to the screen height, NOT the height of your content. If you are using 1024x768 screen resolution, the 100% height will be 768 pixels, eventhough you have your content more than this height.

I look through your script and found you control the layout using css alone, which is NOT what many programmers will do. I would suggest you use HTML table tags to align the two columns so that they stretch together when one of the column is longer than the other. As you are using dreamwaver and template to control the consistency of your pages, it will not be too difficult to change this for all your pages.

By the way, I really like the simple yet freash deisgn of your site.

[chrisjb]

Thanks Zippee,

But I can't go back to tables - too much effort and I'm a CSS man now. You're right about the 100% being for the screen size - that's what happened when I set html as height: 100% instead of min-height: 100%.

It seems to me that one of CSS's strongest flaws is vertical layout - whether it is aligning vertically or defining heights CSS has problems. In this case tables would be easier, but I would rather find the solution than use a fix.

Thanks for your help anyway.

[felgall]

Sometimes setting overflow makes a difference in how the height is treated.

[jeweline]

Hi,

I'm new to CSS (still working on my first layout)! I don't know if the following link will help, but here it is:

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

CJ

Thanks Zippee,

But I can't go back to tables - too much effort and I'm a CSS man now. You're right about the 100% being for the screen size - that's what happened when I set html as height: 100% instead of min-height: 100%.

It seems to me that one of CSS's strongest flaws is vertical layout - whether it is aligning vertically or defining heights CSS has problems. In this case tables would be easier, but I would rather find the solution than use a fix.

Thanks for your help anyway.