3 Equalising Columns - 100% high version
Normal height layout in percentage width
Normal height width fluid centre only
This 100% high version will have problems in browsers that don't like min-height (like older safari) and opera has problems redrawing the footer when the page is resized. However it is fine on first page load and on refresh so I can live with that.
It should work fine in IE5 - 7 although I haven't bothered with the box model hacks for this demo. It should work in most other modern browsers also (Firefox / mozilla / Netscape8).
This is a 3 column layout using Fixed width columns. Each column can have a full length border and a different background colour and no images are required for this.
Start This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content : This is the left content : this is the left content :
This layout uses my negative margins technique once again to achieve the effect of the three columns. The 2 outer wrappers supply the left and right column colours and the middle column supplies the middle column colour and is used as the main container in most respects. The left and
right floats are floated out of the middle container and into the gaps at the side created by margins on the inner and middle wrappers.
This 100% high version uses 2 absolutely placed divs to contain the 100% height colours for 2 of the columns for browsers other than ie6 and under. As the divs are not holding content they just expand with the relative parent to maintain 100% height at all times.(These absolute elements aren't needed for ie6 and under becauese they will use the 100% height on existing inner elements anyway).