Page 1 of 1

DIV Positioning, question

Posted: Mon Jan 17, 2011 9:16 pm
by jmueller0823
Our site (ten years old) is primarily built on tables, fixed width, etc. We use css extensively, but the tables are still utilized. Sort of a "hybrid" design that will do until we transition to a pure css design.

On the home page, there are several elements that are contained in absolute-positioned DIVs.

Please see growth trac dot com
Note the page is left-justified. All is well.

We want to re-position the pages to center, so we've deployed the code below on a test page:

Code: Select all

*{ margin:0;  padding:0;  } 
body
	{
	text-align: center;
	margin: 5px;
	background:  #CBC9B9;
	color : #000;
	}
	

#wrapper
{
     width:960px;
     margin:0 auto;
     width: 50em;
     text-align: left;
}

<body>
<div id="wrapper">
// content
</div>
</body
The result: growth trac dot com/index-center.php

QUESTION
The positioning of the DIVs seems to vary depending on screen resolution.
Previously (before the "centering change"), the DIVs were consistent across all resolutions.

>> Why is this occurring?

PLEASE NOTE: We know the code is a mess. We'd like to make a "fix" to make this work-- and at a future date, do a re-design.

Thanks much.

Re: DIV Positioning, question

Posted: Thu Jan 20, 2011 4:43 pm
by jmueller0823
bump please.

Re: DIV Positioning, question

Posted: Fri Jan 21, 2011 2:35 pm
by pickle
The problem is due to your absolute positioning. Since you're centering, the position of non-absolutely-positioned content changes, but not the absolutely-positioned items. This wasn't a problem when left-justified because the position of everything stayed static.

In a purely div/css based design, the solution would be to set the parent element to position:relative. Absolutely positioned children are then positioned relative to the parent and not the window. Unfortunately, Firefox (and possibly WebKit) doesn't listen to the setting of position:relative on table cells.

I believe the fix for this is to put a <div> wrapper around all the content in that <td>, and relatively position the <div>. The absolutely positioned children should then take their position cues from their relatively positioned parent.

Re: DIV Positioning, question

Posted: Fri Jan 21, 2011 7:21 pm
by jmueller0823
Thanks.

Re: DIV Positioning, question

Posted: Thu Jan 27, 2011 6:31 pm
by Pazuzu156
What also helps is don't use the positioning to center, just edit the left and right margins.

Code: Select all

<html>
<head>
<title>Div Centering</title>
<style type="text/css">
body, html {
	background-color:#CCCCCC;
}
#wrapper {
	background-color:#999999;
	width:900px;
	height:600px;
	margin-left:auto;
	margin-right:auto;
}
</style>
</head>
<body>
<div id="wrapper">
Content
</div>
</body>
</html>
Try that it should work.

Re: DIV Positioning, question

Posted: Mon Jan 31, 2011 4:49 am
by bestwebdesigner
jmueller0823 wrote:Our site (ten years old) is primarily built on tables, fixed width, etc. We use css extensively, but the tables are still utilized. Sort of a "hybrid" design that will do until we transition to a pure css design.

On the home page, there are several elements that are contained in absolute-positioned DIVs.

Please see growth trac dot com
Note the page is left-justified. All is well.

We want to re-position the pages to center, so we've deployed the code below on a test page:

Code: Select all

*{ margin:0;  padding:0;  } 
body
	{
	text-align: center;
	margin: 5px;
	background:  #CBC9B9;
	color : #000;
	}
	

#wrapper
{
     width:960px;
     margin:0 auto;
     width: 50em;
     text-align: left;
}

<body>
<div id="wrapper">
// content
</div>
</body
The result: growth trac dot com/index-center.php

QUESTION
The positioning of the DIVs seems to vary depending on screen resolution.
Previously (before the "centering change"), the DIVs were consistent across all resolutions.

>> Why is this occurring?

PLEASE NOTE: We know the code is a mess. We'd like to make a "fix" to make this work-- and at a future date, do a re-design.

Thanks much.
Hi,
Use this code to the wrapper class
#wrapper
{
width:960px;
height:auto;
margin:0px, 0px, 0px,0px;(adjust the margin and padding based on your wrapper div position)
}