...

View Full Version : DIV Positioning, question



jmueller0823
11-22-2010, 05:15 PM
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:


*{ 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 occuring?

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.

durangod
11-22-2010, 05:33 PM
ok if i understand you were left justified then you went to center and now screen resolution affects you..

well left is allways a constant on any resolution, the other three sides are not.. so if you build it left justified your safe, any other way and your not..

thats why i always try to use % such as width 50% and such because 50% of 800x600 is the same as 50% of 1024x760 from a page point of view but

50px of 800x600 is dif than 50px of 1024x760...

i always use percent when i can..

sorry had to add this, ill bet you since your build by tables that all your tables are set to px not %..

does that help

teedoff
11-22-2010, 05:37 PM
Since you will eventually do away with tables, why not wrap everything in a wrapper div. Then in your style sheet, set #wrapper div a width less that the width of your screen resolution, and then set margin to auto. Like so:


<body>
<div id="wrapper">
All your page content
in here.

</div>
</body>


CSS-----

#wrapper{
width: 960px;
margin: auto;

}

jmueller0823
11-22-2010, 05:52 PM
durangod, thanks. Yep, our tables are set with pixels -- not percent.

teedoff -- isn't that what we're doing? (We're using a wrapper div)
Please see durangod's post . . .

Is this a worthwhile exercise, since our tables (site-wide) are set with pixels?

Thanks guys.

durangod
11-22-2010, 06:05 PM
i could be wrong but i think your still going to run into issues even with the wrapper, it will help but i dont think it will be a total solution..


dont know your situation completely but wanted to add this..

not sure how big the site is or how labor intensive it would be to go in and change all the tables but if you do just remember dont get lost in the table and sub table layers..

this might help you.

lets say the top layer table is 100%, that is 100% of the whole page...

now if i have a sub table that is 50% (half the page)and then another sub table that is 100%.
then that third layer table is only 100% of 50% of the page, so basically its saying its 100% of half the page,
does that make sense lol

just fyi, hope you get it worked out ..

teedoff
11-22-2010, 06:25 PM
durangod, thanks. Yep, our tables are set with pixels -- not percent.

teedoff -- isn't that what we're doing? (We're using a wrapper div)
Please see durangod's post . . .

Is this a worthwhile exercise, since our tables (site-wide) are set with pixels?

Thanks guys.

lol you are right. thats what I get for doing 10 things at once and not reading the entire post. I thought you were saying your pages were built with table layouts, and wanted everything to now be centered. Sorry.

jmueller0823
11-22-2010, 07:34 PM
Guys, thanks for the reality check.

I think it's best to wait, as the work would be significant -- ~ 20 templates, 4,000 pages . . .



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum