3 column layout

3 column css layout

[adrianbromfield]

Hi, I wrote a topic a while back about how i would go about writing a 3 column page layout and have the 3 columns grow if another grows for a dynamic database site.

Some guys mentioned about using a thing called clear with float and another way would be to use javascript.

I never got round to asking these guys, but ive had a fiddle with float and i still get problems. maybe doing something wrong? it woldnt be so bad but i also have more divs as for a header and footer. this is when things start going wrong!

Maybe sumbody could show me a very basic layout example or help me with how i could give the javascript way a go?

thanks,

adrian

[Xapti]

You know you can look at all your previous posts in a forum, and find your thread that way...
Otherwise you could still perform a search.

Do you mind if your header and footer span the whole page, or did you just want them in one (possibly the center) column?

Also, is it always one column which will be the largest... or could any one of the three columns potentially be the longest?
It would not be too hard to accomplish if one column would always be the largest. That would be the non-floated column.

[adrianbromfield]

Hi thanks for the response, preferably we would like to make any of the 3 be able to be the largest column. However having the main center column would be a good start!

The idea of header and footer we tend to use is they would spread the whole width of the 3 columns
so like...

--------------------------------------

--------------------------------------
  ¦  ¦  
  ¦  ¦  
  ¦  ¦  
  ¦  ¦  
--------------------------------------

--------------------------------------

i know the know breaking spaces dont work but hopefully this will give you an idea of the layout :D

[Xapti]

Well there's no REAL way to do this perfectly using divs.

There are two main types of improvised methods, and then theres display:table-cell.
display:table-cell doesn't work for IE so it's generally cut out of the options

The most popular method is probably faux columns. What This does is it uses a background image to go all the way down the screen to appear as if the div continues, when really it doesn't.
It's quite easy to do if the 3 columns have a fixed width.
Otherwise, you'll need to do some changes which make it a bit more work, but you get the same result.

There are many links on the web. Just search for "faux columns" and if you have non-fixed widths, you can search for "flowing" too.

If center column will always be the longest, it's very easy to do:
Just have <header><conatiner><left><right><center></container><footer>
header, footer {height:something}
container{position:relative (needed to inherit height)}
right{float:right;height:100%;width:something}
left{float:left;height:100%;width:something}

Very simple.

[SuzyUK]

you might like to take a look through this thread in the library [webmasterworld.com] which has a variety of different layouts, the one I've linked to sounds like it might help..

[adrianbromfield]

thanks alot guys, yea i was thinking of something like with that background thing but for some reason i thought it wouldnt work but now i can see how it would lol.

thanks alot for the help. should solve alot of issues now!