PDA

Click to See Complete Forum and Search --> : Fluid Center with two side fixed-pixel columns

webuser123
04-15-2010, 05:12 PM
Hello,

I have a web page with a fluid center surrounded by the fixed-pixel left and right column. Here is the code of the page :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

#left {width:200px;position:absolute;left:10px; border: 1px solid #f00;}
#right {width:200px;position:absolute;right:10px; border: 1px solid #000;}
#center {margin:0 210px; border: 1px solid #69f;}

</style>

</head>

<body>

<div id="left"> ... </div>
<div id="right"> ... </div>
<div id="center"> ... </div>

</body>
</html>


The question I have is why the right column drops below if the order of the 'right' and 'center' divs is swapped. If the content within the <body> tags is :

<div id="left"> ... </div>
<div id="center"> ... </div>
<div id="right"> ... </div>

then the right div drops and the page doesn't display correctly. Any idea why the order matters in this case? Thanks!!
tirna
04-15-2010, 07:39 PM
It's because you didn't have a position style on the centre div.

When you assign a position to an element you are taking it out of the normal page flow and specifying where you specifically want it to go and the browser will then flow the non postioned elements around it as much as possible acording to the natural page flow.

The styles below will allow you to place the 3 divs any order you like now and they will appear on the one line horizontally (in at least FF :))


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

#left {width:200px;
position:absolute;
left:10px;
border: 1px solid #f00;}

#right {width:200px;
position:absolute;
right:10px;
border: 1px solid #000;}

#center {
position: absolute;
margin:0px 210px 0px 210px;
border: 1px solid #69f;}

</style>
</head>
<body>

<div id="center">div centre</div>
<div id="right"> div right</div>
<div id="left"> div left</div>

</body>
</html>
webuser123
04-16-2010, 11:53 AM
Thanks for the reply tirna. You are right.. adding position: absolute to the center div lets you put the divs in any order. But if you compare the above two pages, you will see that the center div ( blue border) in your solution doesn't span the middle of the page. I want the middle div to span the entire middle area of the page. Any ideas? thanks!