PDA

View Full Version : content is outside the wrapper and will not center



zitalorna
Sep 23rd, 2010, 09:33 AM
I think I have the correct CSS and HTML - yet the content remains outside of the main wrapper. The wrapper div is centered (I see the dotted line) but the content is not.

I have spent hours trying to figure this out - and it's driving me crazy. Please help.

My CSS is as follows:

<style type="text/css">

body {
text-align: center;
min-width: 1024px;
}
#wrapper {
text-align: left;
width: 1024px;
margin-left: auto;
margin-right: auto;
height: 768px;
}
#hmlogo {
position:static;
left:0px;
top:0px;
width:480px;
height:131px;
z-index:1;
visibility:visible;
}
#hmnavtop {
position:relative;
left:480px;
width:544px;
height:57px;
visibility:visible;
top: 0px;
clip: rect(0px,auto,auto,auto);
}
#hmnavprodon {
position:static;
left:480px;
top:57px;
width:139px;
height:31px;
z-index:3;
visibility:visible;
}
#hmnavservon {
position:static;
left:619px;
top:57px;
width:116px;
height:31px;
z-index:4;
visibility:visible;
}
#hmnavpresson {
position:static;
left:735px;
top:57px;
width:91px;
height:31px;
z-index:5;
visibility:visible;
}
#hmnavstoryon {
position:static;
left:826px;
top:57px;
width:117px;
height:31px;
z-index:6;
visibility:visible;
}
#hmnavrt {
position:static;
left:943px;
top:57px;
width:81px;
height:31px;
z-index:7;
visibility:visible;
}
#hmnavbtm {
position:static;
left:480px;
top:88px;
width:544px;
height:43px;
z-index:8;
visibility:visible;
}
#hmbody {
position:static;
left:0px;
top:131px;
width:1024px;
height:637px;
z-index:9;
visibility:visible;
}
body {
background-color: #000000;
margin-top: 0px;
}
</style>

The HTML is as follows:

<body>
<div id="wrapper">
<div id="hmlogo"> <img name="hm_logo" src="images/hm_logo.jpg" width="480" height="131" border="0"></div>
<div id="hmnavtop"> <img name="hm_nav_top" src="images/hm_nav_top.jpg" width="544" height="57" border="0"></div>
<div id="hmnavprodon"> <img name="hm_nav_prod_on" src="images/hm_nav_prod_on.jpg" width="139" height="31" border="0"></div>
<div id="hmnavservon"> <img name="hm_nav_serv_on" src="images/hm_nav_serv_on.jpg" width="116" height="31" border="0"></div>
<div id="hmnavpresson"> <img name="hm_nav_press_on" src="images/hm_nav_press_on.jpg" width="91" height="31" border="0"></div>
<div id="hmnavstoryon"> <img name="hm_nav_story_on" src="images/hm_nav_story_on.jpg" width="117" height="31" border="0"></div>
<div id="hmnavrt"> <img name="hm_nav_rt" src="images/hm_nav_rt.jpg" width="81" height="31" border="0"></div>
<div id="hmnavbtm"> <img name="hm_nav_btm" src="images/hm_nav_btm.jpg" width="544" height="43" border="0"></div>
<div id="hmbody"> <img name="hm_body" src="images/hm_body.jpg" width="1024" height="637" border="0"></div>
</div>
</body>

effpeetee
Sep 23rd, 2010, 09:38 AM
#wrapper {
text-align: left; ================Try text-align:center;
width: 1024px;
margin-left: auto;
margin-right: auto;
height: 768px;
}



Useful stuff here. (http://www.exitfegs.co.uk/Sources.html)
Use the Search facility - single words are often the best for this.

Frank

zitalorna
Sep 23rd, 2010, 09:58 AM
Thank you for your response Frank. Unfortunately, that did not make a difference. I simply cannot get the contents of the main wrapper to center on the web page. I did add to my original post - listing the entire CSS. Do you think the problem might be that the individual DIVs have an "absolute" position? I played around with static, relative and fixed - but they just became jumbled up. Thhe only way everything stays in the correct position is if they are absolute.

zitalorna
Sep 23rd, 2010, 10:05 AM
Thank you for your response Frank. Unfortunately, that did not make a difference. I simply cannot get the contents of the main wrapper to center on the web page. I did add to my original post - listing the entire CSS. Do you think the problem might be that the individual DIVs have an "absolute" position? I played around with static, relative and fixed - but they just became jumbled up. The only way everything stays in the correct position is if they are absolute.

SB65
Sep 23rd, 2010, 12:22 PM
None of the divs in your posted code have position:absolute, but yes, if they were, this would make them sit outside #wrapper, because they will be positioned absolutely with regard to the viewport and not with respect to #wrapper.

If you add position:relative to #wrapper, then divs within #wrapper will be positioned absolutely with respect to #wrapper which sounds like it might be what you're after.

All that said, using position absolute has a number of pitfalls, and means if one div gets bigger then all the other ones have to be moved individually. It's not quite clear what your layout is like, but you might have a look here (http://bonrouge.com/3c-hf-fluid-lc.php) for some layouts without absolute positioning.

Major Payne
Sep 24th, 2010, 07:43 AM
The text is being set to the left which is a browser's default anyway. If you want the text centered, too:



* { margin: 0; padding: 0; border: 0; }

body {
min-width: 1024px;
margin: 0 auto;
background: #000;
}

#wrapper {
width: 100%;
height: 768px;
text-align: center;
}


If the body is centered, the wrapper will center even if set to 100% (1024px). I don't see any text, so the text-align: center; can be removed. With the Universal Selector at top of CSS, you can remove all the border="0" attribute and add the alt="" attribute as required. Didn't bother checking rest of CSS. Might take another look at using position: static; since you are placing the relative to the container.