Full-height CSS layout, with multiple columns?

Given that you have your gradients in seperate columns to the left and right, you need to implement faux columns If you're after elastic versions, have a look at Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box.

Given that you have your gradients in seperate columns to the left and right, you need to implement "faux columns". If you're after elastic versions, have a look at Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box.

Here's what I ended up using, using this technique of high value for padding-bottom, with an equal but inverted value in margin-bottom - then you set overflow:hidden on the div enclosing that huge margin. It's rather hackish, but it works! I now have a full-height, a single em-defined width, and a full-height background-image down each side!

There's not much extra markup (a container div, a div for each of the three columns) Yay Put lots of text here.

I just watched a video about YUI's grids and looked very promising (recommended watching! ). I haven't had the time to test it out, yet, but most probably will do so in the future.It might be what you want.

– dbr Nov 14 '08 at 9:50 That is true, there were some predefined column widths. But you are free to modify the values to suit your needs, naturally... – Henrik Paul Nov 14 '08 at 15:58.

Try with this modifications: Test page Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Almost! ..but it isn't full-height when there is not much content.. – dbr Nov 17 '08 at 13:46.

– dbr Nov 14 '08 at 9:46 Oh.. Markdown treated the div tag as real HTML.. – dbr Nov 14 '08 at 9:48.

Got there in the end with this one, but had to make a few changes to your markup and the images. Remove the #left and #right divs. Make a new single background image that's 592px wide, transparent background and has the gradients at the left and right of it - a 1px high image with left gradient - transparent section 504px wide - right gradient. Add the logo to the #wrapper, just before the #middle So the markup looks like this now: ... etc ... Then, the relevant changes in the stylesheet are: #wrapper{ height:100%; width:805px; margin-left:auto; margin-right:auto; text-align: right; } #middle { width:504px; padding: 0 44px; margin: -154px auto 0 auto; background:#000 url(new_bg.

Png) repeat-y top left; } Looks fine to me. Only tested in in FF3 and Opera (running Linux without access to Windows / Mac atm) but I don't think there should be any big issues with it in IE / Opera.

I think dbr wants a liquid desing, so you can't use fixed width in pixels. But, if fixed width is acceptable, your solution is OK and more clean. – ARemesal Nov 14 '08 at 11:42 doh!

My bad. Never even noticed the ems ... – David Heggie Nov 14 '08 at 11:50.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.