Left and right column auto width adjustment

[gggmicrosystems]

Hi Guys,

I wanted to create a 3 column layout.
of course, a left, center and right column...

I wanted the Center column to be at exactly 700 pixels in width and the
other left and right would be automatically adjusted depending on the
resolution...

so if my resolution is 1024x768 my left and right column would be 162 pixels
each...

but if my resolution is 1280 x 1024, my left and right column would be 290
pixels each...

I made this possible but I was using a javascript to get width of a client's
resolution..

Can this be done using CSS alone?

Thanks so much for your help.

[Marshall]

You can assign percentages, or em's, to the left and right columns. It gets a little tricky since you are mixing fixed and liquid, but it does work. I suggest starting by making the left and right columns 10% each in width then go from there.

#left {
width: 10%;
}
#center {
width: 700px;
}
#right {
width: 10%;
}

Marshall

[gggmicrosystems]

Thank you for your reply Marshall... 10% wont work on higher resolution screens.. if you increase the more than 10%, it wont work again on lower resolution screens.. I want to achieved a liquid left and right column and fixed center columns... I've been searching for a default layout about it but I haven't any.. mostly, they're fixed left and right column and liquid center...

[Marshall]

{quote}mostly, they're fixed left and right column and liquid center... [/quote]

That is a more common layout. One thing you can try is this:

#wrapper {
width whateveryouneed;
margin: 0 auto;
padding: 0;
text-align: left;
}
#content {
width: 700px; /* this is your fixed center */
margin: 0 auto; /* may have to be 0 10px */
padding: 0 10px;
}

<div id="wrapper">
Text for left side
<div id="content"></div>
Text for right side
</div>

Of course, you will have to play with margins and floats. probably creating a <p> pseudo class for the left and right text.

Marshall

[Old_Honky]

ggimicrosystems,

I did a google search and found a layout that works, as we are not allowed to post uri's here I will mail it to you.

To get the centre column to work you give it a negative left-margin equal to half its width, then give the left column a right-margin equal to half the centre column width and the right column a left-margin equal to half the centre column width.

It is more complicated than that but it does work like you want it to.