2 replies [Last post]
Bungopolis
Offline
newbie
Last seen: 18 years 8 weeks ago
Joined: 2003-08-21
Posts: 5
Points: 0

I'm having a very tough time creating a layout. It is 3 columns, and any of the 3 columns could be the longest. A container of all 3 columns should therefore s t r e t c h to hold all 3 columns. Heres an example of what I'm looking for, with 3 different possibilities:

1 = background
2 = container (on top of background)
3 = left column
4 = center column
5 = right column

Any of the three columns can be any size, and the container (2) will always contain all 3 columns, regardless of length.

I have no problem doing this if there was no container, but becuase the container has to be of variable length, I am having a tough time!

Logically, all three columns should be placed inside a container id, but when they are inside, they have to be relative, and I havent been able to make them stick to their sides! They always stack on the left or......

Any tips would greatly appreciated: if you'd like to see anything else, please ask.

Thanks very much!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Going insane: 3 column layout with stretching container?

Hi Bungopolis,
Have you tried floating the three columns.

#lft{width:19%; float:left; border:solid 1px blue;} 
#ctr{width:60%; float:left; border:solid 1px red;} 
#rgh{width:19%; float:right; border:solid 1px green;}

<div id="container"> 
   <div id="lft">Left </div> 
   <div id="ctr">Center</div> 
   <div id="rgh">Right</div> 
 
   <div style="clear:both;"></div> 
</div>


Hope that helps

Bungopolis
Offline
newbie
Last seen: 18 years 8 weeks ago
Joined: 2003-08-21
Posts: 5
Points: 0

Going insane: 3 column layout with stretching container?

That's great, works perfectly! I did try using float before, but couldnt figure out how to get the center one in there. Thanks a lot.