3 Col Fluid Fixed Fluid Example

[urbanmac]

Hi,

I've just been looking at the 3 column fixed fluid fixed template here:

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

Could someone tell me why the right hand column does not touch the footer (view in Safari and FF2.0) and how this can be rectified

Thanks

:)

[belsidaam]

This is a normal behaviour. The different divs that build this layout are completely ignorant of each other. That means the right column does not know how high the middle column is. It will just be as big as its own content. You should see that IE sometimes does it as you would expect that means filling up to the bottom but this is a wrong behaviour.
To rectify this, you have two options:
1. Get a script from dynamic drives script library that is called equalheights or something like that. This script will automatically adjust the size of divs to what you want.
2. Getting the div itself to expand with css is impossible. Some people use an image in the background of the body that is aligned to the right in this case with the correct width. This can give you problems that the image extends below your footer. In this case you have to use the div in a div method.
Check out http://www.binarylooks.com. I used this exact method to get the menu on the left extend vertically with the content of the main page. I have to admit, it took me several hours to do it.

[Twey]

I use the PIE method (http://www.positioniseverything.net/articles/onetruelayout/equalheight) of equal height columns. It has problems with document fragment links in some browsers, but this is contrary to the standard, and it's otherwise far superior to either the faux columns method (described by belsidaam above) or scripting.