3-column layout, left and right variable with, center column fixed width

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.

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.

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.

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.

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

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?

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

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

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.

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

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?

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.

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.