11 replies [Last post]
promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

Hello,
I've searched the net for a while but couldn't find an exact answer.
Basically I need to have a 3-column layout where the middle column has fixed width of 750px and the side columns stretch to the edges of the screen (fluid). The middle column should always be centered.
Basically if I were to accomplish this with tables it would look something like this:

<table width=100%><tr>
<td bgcolor=#FF0000></td>
<td bgcolor=#FFFFFF width=750>main stuff here</td>
<td bgcolor=#00FF00>right</td>
</tr></table>

Except when you scale the window horizontally the scroll bar should appear once the window reaches 750px width.

The closest layout I have found so far is - http://blog.html.it/layoutgala/LayoutGala21.html . But I'm not able to figure out how to tweak it to my needs. Can't get the middle fixed-width column to center correctly. Any help would be GREATLY appreciated!

Thank you!

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

3 column layout w/center fixed &amp; liquid sides

do you have content in the left and right columns? or are you just trying to center a 750px div with a background image on either side?

promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

3 column layout w/center fixed &amp; liquid sides

Sorry I didn't put this in the original post:
Basically the reason I would need to have a 3 columns instead of just doing margin: 0 auto; for the center column is:

I need to assign different backgrounds to the left and to the right of the center column. So the left column would have one background, then fixed middle column centered, then the right column with another background.

Another thing is that the header and the footer would be located inside of the center column as well.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

3 column layout w/center fixed &amp; liquid sides

In theory, a div will expand to fill it's container.

Consider this:

1) A repeating background image on the <body>, equal to the width of the left column.

2) A div, with a left-margin equal to that of the left column. This contains the center and right columns.

3) A repeating background image on the container div, which forms the background of the right column.

It's called Faux Columns, and I stole the idea for layout from the Holy Grail article on www.alistapart.com

Verschwindende wrote:
  • CSS doesn't make pies

promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

3 column layout w/center fixed &amp; liquid sides

Yes, but my main concern is how do I know what the left div's width is going to be? Or the right div's width? The only width I know for sure is the center div - 750px. The left and right div's widths are supposed to be determined by a browser's viewport. I can't just use percentage units on them since the middle div has fixed pixel units assigned. Or can I?

promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

3 column layout w/center fixed &amp; liquid sides

Also, the left and right divs don't have to be the same height as the middle div (vertically expandable depending on how much content is in it). They could be 140px to 500px in height (different height per column). If that makes any difference.

Tammy55
Offline
Regular
SF,CA
Last seen: 12 years 12 weeks ago
SF,CA
Timezone: GMT-8
Joined: 2006-02-03
Posts: 47
Points: 0

3 column Layout

Here is something I use a starter for some layouts...
http://glish.com/css/7.asp
Not sure it is what you are looking for....but it seems simlar and a good base to play around with.
Laughing out loud

Tammy
http//AngelsBridge.com

promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

3 column layout w/center fixed &amp; liquid sides

This is the exact reverse of what I'm looking for. I need fixed middle and flexible sides with middle being in the center.
The link has the sides fixed and the middle flexible. I ran into that link a few days ago actually when searching for the solution to my problem. Thanks for reply though.

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

3 column layout w/center fixed &amp; liquid sides

are the left and right images dynamic? do they change with page reload or on different pages? Are they each a single image - which will be cut off increasingly as the browser window shrinks in width?

promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

3 column layout w/center fixed &amp; liquid sides

wolfcry911 wrote:
are the left and right images dynamic? do they change with page reload or on different pages? Are they each a single image - which will be cut off increasingly as the browser window shrinks in width?

Ultimately the background doesn't even have to be an image. It could possibly be accomplished by using background-color. The left DIV would always be static in terms of background colors and heights. The right DIV may change its background color and height and could also include several other DIVs for making striped background (several DIVs inside of the right DIV with 100% width and different backgrounds and heights) as shown on the picture below. The right DIV would be dynamic and would change its vertical height / colors with each page.

For now I at least need the right DIV to be the same as the left DIV, no dynamic stuff yet... I just need to get the centering reality straighten out. Thanks guys!

Thank you!

promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

3 column layout w/center fixed &amp; liquid sides

#global_left
	{
	background: #FFF;
	margin-left: -375px;
	height: 146px;
	width: 50%;
	float: left;
	}
	
#global_center
	{
	float: left;
	width: 750px;
	}

#global_right
	{
	background: #FFF;
	margin-left: -375px;
	height: 180px;
	width: 50%;
	float: left;
	}

The left side is working the way I need it to but the right side is still messed up...[/code]

promixe
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-7
Joined: 2006-03-25
Posts: 10
Points: 0

3 column layout w/center fixed &amp; liquid sides

After messing around with it I got this:

#global_left
	{
	background: #FFF;
	margin-left: -375px;
	height: 146px;
	width: 50%;
	float: left;
	}
	
#global_center
	{
	float: left;
	width: 750px;
	position: relative;
	z-index: 500;
	margin-right: -375px;
	}

#global_right
	{
	background: #FFF;
	margin-right: -375px;
	height: 146px;
	width: 50%;
	float: left;
	}

It seems to work in IE6/Win, Safari, FF and Opera8. Except in Opera the right div gets on top of the center one and partially covers it. Z-index doesn't fix anything.
Any help would be greatly appreciated!

Thanks!