4 replies [Last post]
davtun
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-01-04
Posts: 3
Points: 0

Hi,

Ok, this is what i am trying to achieve. I am redesigning my site and want to go for the 3 column approach where the middle column is centered and of a fixed width, and the two side columns are fluid.

Now, i realise i can very easily do this by having just the one column and centering that. My problem occurs because i have two different images, one for each side column. Its a bit hard to see, but i am after this effect http://www.neverstandstill.com/ but with a greater gradient than that used on this site, so it makes it look like the center column is raised above the background.

As you will see, the site above uses tables to do this. Is this possible using divs? I have tried several things to get this to work and seem to end up with a center column that expands??

Any help would be very gratefully received...

Cheers
Dave

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

3 column css questions...

What you're after is actually a 1 column design. I can understand you're thinking of 3 columns converting from tables, but it's 1 content column. The rest can be achieved with a background image. Have a look at this site as an example.
http://www.travelingguys.com/

davtun
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-01-04
Posts: 3
Points: 0

3 column css questions...

Hi,

Thanks for the reply.

Yeah, I had thought about that, but i don't think it will work in this case. I may not have explained it that well before, so i have added an image to hopefully illustrate it a bit better.

I would like the white area to remain fixed width. I was thinking two columns were needed each side of this central column because the images are unique for each side of the content.

When the browser window increases in size, the central column stays in the centre of the browser window, and the side columns are resized to fill the window. When the side columns are resized they reveal the blue colour as shown in the image, so i would need to right align the backgound image in the left column and left align the image in the right column... or at least, thats how it would have been done in tables, like you said.

Is this possible with the single column? If not then is it possible at all?

Cheers
Dave

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

3 column css questions...

Yes, it's just like I stated above, and like the site I pointed to does it. It uses a single background image that would be as wide as the widest window you wish to accomodate (1600px ?). Then simply center the background image. Done. As the window gets wider, more and more of the left and right blue areas are shown.

In fact, you're example is easier than the site I pointed to because you're using a tileable background. Small file size. You could accomodate screen sizes of 2000px or more very easily.

davtun
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-01-04
Posts: 3
Points: 0

3 column css questions...

Sweet.... Thank you very much. I'll give that a try Laughing out loud

Cheers
Dave