Problems with 3 column layout -level columns (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

GolfMad -> Problems with 3 column layout -level columns (1/8/2008 4:57:25)

http://www.rationalservice-sw.co.uk/real/

In the old days of tables, I sometimes remember cursing when increasing a cells content made all the row the same height by default - now I want that to happen automatically in css, I dont know how to do it!!

The left hand column does not expand when more content is added to the other two columns and as it has a red background, rather than white, it does not look right right.

Can anyone help please.

Thank you
Phil



Tailslide -> RE: Problems with 3 column layout -level columns (1/8/2008 5:58:05)

Hi Phil

Yes the background colour will only extend as far as the content.

The way around it is it use Faux columns - which sounds, at first like a bit of a faff - but actually it's quite straightforward. Here's an article on the subject: http://www.alistapart.com/articles/fauxcolumns/

Basically, instead of giving the sidebar a background colour, you give the div containing the sidebar and the main content (or the main content div if that contains the sidebar) a background image which is a thin strip of red to the right width, repeating vertically behind the sidebar. So what you end up with is the effect of having equal columns as the background image will expand to the full height of the main div whatever that is. I use this technique on virtually every site I do.



Tailslide -> RE: Problems with 3 column layout -level columns (1/8/2008 6:07:21)

Here you go: TEST PAGE (I've added the extra CSS rule into the page head but obviously you'd want to move that to the stylesheet)



GolfMad -> RE: Problems with 3 column layout -level columns (1/8/2008 6:31:02)

Thanks so much Tailside.

I have got it to work, the article was slightly confusing at first, talking about the absolute and relative positioning, whereas my container is centred. However the centre positioning for the container seems to have disposed of the need for the positioning that was in the article and the other principles from it have worked.

Thanks again.
Phil



Tailslide -> RE: Problems with 3 column layout -level columns (1/8/2008 6:40:12)

Yeah don't bother with the absolute positioning - just use what I've used in the test page in my last post - that works well.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875