/    Sign up×
Community /Pin to ProfileBookmark

Fluid Center with two side fixed-pixel columns

Copy linkTweet thisAlerts:
Apr 15.2010

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!!

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaApr 16.2010 — 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 ?)

[code=php]
<!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>
[/code]
Copy linkTweet thisAlerts:
@webuser123authorApr 16.2010 — 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!
×

Success!

Help @webuser123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...