DIV Positioning, question

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
jmueller0823
Forum Commoner
Posts: 37
Joined: Tue Apr 20, 2004 9:06 pm

DIV Positioning, question

Post 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.
jmueller0823
Forum Commoner
Posts: 37
Joined: Tue Apr 20, 2004 9:06 pm

Re: DIV Positioning, question

Post by jmueller0823 »

bump please.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: DIV Positioning, question

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
jmueller0823
Forum Commoner
Posts: 37
Joined: Tue Apr 20, 2004 9:06 pm

Re: DIV Positioning, question

Post by jmueller0823 »

Thanks.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: DIV Positioning, question

Post 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.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
bestwebdesigner
Forum Newbie
Posts: 9
Joined: Mon Jan 31, 2011 4:38 am

Re: DIV Positioning, question

Post 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)
}
Post Reply