PDA

Click to See Complete Forum and Search --> : [RESOLVED] Fixed center, liquid sides

jacobdesch
05-11-2009, 12:51 PM
Hi all,
My question is pretty simple. I'm working on a three column layout with a fixed center column size (615px) and two liquid columns on each side. I need to have a background image in each of the side columns that is sucked up against the center column and doesn't need to scroll horizontally to view all the content in those two columns. I've uploaded my test files here so you can take a look:

http://www.fhcommunication.com/client/dot2/index_test.html

As you can see, I've got it working pretty well, except that the horizontal scrolling happens a little sooner than I would like it too. The minimum width is 1024, so the whole burst doesn't need to be seen, but I don't want it to scroll when the page is in that magical area between 1024 and whatever width it starts scrolling. I'm sure it's just a matter of playing with widths and margins and whatnot, but for the life of me, I can't figure it out. Does anyone have any suggestions? Thanks!
jacobdesch
05-11-2009, 01:18 PM
Ok, so I worked it out a little better, but I'm still having the horizontal scrollbars come up. The problem is the right side is too wide, but if I lower the percentage, it starts to cut off the bursts prematurely when I resize the window. Why does it work on the left side but not the right?

http://www.fhcommunication.com/client/dot2/index_test.html
jacobdesch
05-11-2009, 01:26 PM
Nevermind. Fixed it.
OrbitDesign
05-18-2009, 03:29 PM
Help! I'm having the same issues. I'm trying for a 3 column layout fixed center and fluid left and right columns - which contain different background images. I'm not having any luck. Can you please poste you link you had solved above so I may take a peek at your code?

Thanks
John
jacobdesch
05-20-2009, 05:32 PM
Sorry for the delayed response. The project I needed this for just got kicked into high gear, so I was just a little busy. It's actually fairly easy to do, just accomplished with a bit of math and some negative margins. This one contains a header as well, but it would be easy enough to take out if you need to.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
min-width: 1200px;
margin:0;
padding:0;
background-position: top center;
}

#left-side-outer {
width:50%;
float:left;
margin-right:-400px;
height: 800px;
}
#left-side{
margin-right:400px;
background-color: #FF9900;
height: 800px;
}
#center-column {
width:800px;
float:left;
color: #FFFFFF;
background-color: #000000;
position:relative;
z-index:10;
height: 800px;
}
#right-side-outer {
width:50%;
float:right;
margin-left:-401px;
height: 800px;
}
#right-side {
margin-left:400px;
height: 800px;
background-color: #FF9900;
}
#header{
clear:both;
height: 175px;
text-align: center;
background-color: #CC0000;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="left-side-outer">
<div id="left-side">
</div>
</div>
<div id="center-column">Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : </div>
<div id="right-side-outer">
<div id="right-side">
</div>
</div>
</body>
</html>

The one thing you have to look out for is the margin on one of your outer side divs has to be 1px less than half of the width of the center to play nicely in IE. Other wise, it will bump your right side down below the center column. In this case, I set the div "right-side-outer" to be 1px in further than what would have been half of the center column's width (-401px vs -400px). This way, IE doesn't bump it to the next line.

It's easy to change the width of the center column, just make sure that your margins are accordingly set to be half (and negative half) of the center's width, with one side's outer margin one pixel less.

I hope that makes sense.
ljmcwilliam
02-07-2011, 02:46 AM
Hi jacobdesch,
I know this is an old post, however i've used your code and managed to get it working. So thank you very much for solving my problem! :)
Only thing now is that in IE, my left background image does not align to the left of the center column correctly. All other browsers work fine of course. Any idea how i can get around this? My site is VagabondVan.com (http://vagabondvan.com)