13 replies [Last post]
seson
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-06-07
Posts: 6
Points: 0

Hi there,

I've been banging my head against the computer for a while now, but it won't work. I'm trying to get a three-column layout where the middle column has a fixed width. The outer columns are variable in width. The three columns together should be as wide as the browser (regular 100%)

This is very easy with a table (which I don't want to use for styling). Hoping you can help...

Sebastian

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 9 years 1 week ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

different computer has

different computer has different resolution, and because of that it has different width of browser, so to make the CONTAINER of the three columns to be exactly the width of different computer is to use width: 100%.

now, as i've said about resolution, the three columns should also use % in their width so that it is also relative to the resolution of the computer.
example:

left column: width: 30%;
center column: widht: 40%;
right column: width: 30%;

content-wrap: width: 100%; <-- the container of the three columns

a total of 100%, which is the full width of the browser of different computer resolution.

Smiles open closed doors

seson
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-06-07
Posts: 6
Points: 0

it doesn't work with a fixed width

OK, with percentages I works. But I'd like the middle column to have a width of 800px. So I can't use percentages for the outer columns anymore.

edit: The middle column should be centered, i.e. the outer columns should be equally wide.

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 9 years 1 week ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

if thats the case, then i

if thats the case, then i think you cant stretch the overall width of the three columns to point of browser width, because the only way to stretch to the full width of the browser is to use %...

BUT you can overcome it by using javascript.
at first you should define the the whole-wrapper of the three container as 100% then inside your javascript get the value of the width of whole-wrapper by using:
var tmp_width=document.getElementById("whole-wrapper").offsetWidth;

you can then subtract it by 800.
 tmp_width=tmp_width-800;

then devide it by two and assign one of them to left and right columns

BUT, the only problem in this method is that if you devide tmp_width by 2, it has possibility that it will produce a floating number (decimal number).

so overall it will look like this:

 
var tmp_width=document.getElementById("whole-wrapper").offsetWidth;
tmp_width=tmp_width-800;
tmp_width=tmp_width/2;
 
document.getElementById("leftColumn").style.width= tmp_width + "px";
document.getElementById("rightColumn").style.width= tmp_width + "px";

I dont know if it works but try it because i believe it does.

Smiles open closed doors

seson
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-06-07
Posts: 6
Points: 0

not possible without javascript?

I knew that JS could solve this, as could a table. So there's no way with only CSS?

What would be worse? Table or JS? I don't like either option, but it seems CSS doesn't do it for me.

Sebastian

PS: Can someone move this thread into 'CSS Layouts'. My fault I created it here.

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 9 years 1 week ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

if i were you, i would

if i were you, i would choose js so that your code will be valid xhtml.

Smiles open closed doors

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

what are in the outer two

what are in the outer two columns? what do you want to happen when the browser window is only 810px wide? or less than 800?

seson
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-06-07
Posts: 6
Points: 0

background pictures

Hi,

The two outer columns have only background pictures. As those background pictures have an alpha channel, it cannot just be a div behind the centered div. (Otherwise they would overlay and this would lead to a weird effect.)

If it's 810px, the left and right should be 5px respectively. If smaller, well, there should be scrollbars and no left or right column.

Sebastian

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

you don't have a 3 column

you don't have a 3 column design. you have one column. place a single large image on the body (behind) the content.

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 9 years 1 week ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

yes thats right, you only

yes thats right, you only have to use single column and make it (margin: 0 auto) to center.
I thought the left and right columns will be used as containers for any elements.

Smiles open closed doors

seson
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-06-07
Posts: 6
Points: 0

It does not work with just a

It does not work with just a background image.

1) The background image in the left column is different from the one in the right column.
2) As I wrote above, images have an alpha channel, so that the centered div (with another background image) would effectively overlay on top of the one in the background and this would be visible (= bad)

Sebastian

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Does the look of the page

Does the look of the page change the wider the browser gets? Or is it just that more of the background is revealed at the left and right edges?

If its the latter, precombine all your images and use a horizontally centered background.

If its the former, can you show us some sketches of how it should work?

seson
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-06-07
Posts: 6
Points: 0

OK, the last point actually

OK, the last point actually works. However, I have to make the background image really big. Given that many screens support width = 1650 and many people use browsers in full-screen mode, the image has to be 2000px wide at least. That's going to impact file size.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Would it be smaller if they

Would it be smaller if they were separate images?

I guess it could be if one or more of the images repeated. You might try a single colour in the middle of your large image and overlay that with the content background. Both jpeg and png will compress a large single colour region very well.

There will be alternatives that make use of background position and/or position absolute to put images in the sides. Which is best will depend on how the images repeat and what sort of size saving you can get by splitting them.