Member Avatar for <M/>

I created a page, and part's of my site won't center... can anyone help me center it... for example boxes fly out of the container...

Here is my code (sorry for being disorganized and sloppy, I forgot to rename every apDiv):
This is my css:

#center {
    margin: 0 auto;
    height: 2000px;
    width: 1000px;
}

#header {
    position:absolute;
    width:1000px;
    height:405px;
    z-index:1;
    top: 0px;
    margin: 0 auto;
    left: 373px;
}
#header_content {
    position:absolute;
    width:830px;
    height:80px;
    z-index:1;
    left: 86px;
    background-color: #e9f3ff;  
}
#apDiv5 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
}
#apDiv6 {
    position:absolute;
    width:1000px;
    height:160px;
    z-index:2;
    top: 426px;
    background-color: #5c6063;
    margin: 0 auto;
}
#apDiv8 {
    position:absolute;
    width:335px;
    height:367px;
    z-index:4;
    left: 1038px;
    top: 588px;
    background-color: #f2f2f2;
}
#apDiv9 {
    position:absolute;
    width:1000px;
    height:131px;
    z-index:3;
    left: -662px;
    top: 369px;
    background-color: #e9e9ea;
    font-size: 14px;
}
#apDiv11 {
    position:absolute;
    width:140px;
    height:115px;
    z-index:7;
    left: 247px;
    top: 581px;
}
body{
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size:30px;
    background-color: #FFF;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}



#apDiv28 {
    position: absolute;
    width: 309px;
    height: 220px;
    z-index:7;
    left: 689px;
    top: 600px;
    background-color: #D1D1D1;
    margin: 0 auto;
    }

#slideshow {
    position:absolute;
    height:488px;
    width: 1001px;
    z-index:1;
    top: 0px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    width: 1000px;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}
#apDiv21 {
    position:absolute;
    width:321px;
    height:121px;
    z-index:1;
    left: 10px;
    top: 297px;
}
#T {
    position:absolute;
    z-index:2;
    top: 0px;
    left: 58px;
}

#Gplus {
    position:absolute;
    left: 116px;
    top: 0px;
}
.discloretext {
    font-size: 9px;
}
#apDiv8 #apDiv9 p {
    font-size: 9px;
}
#apDiv18 {
    position:absolute;
    width:218px;
    height:28px;
    z-index:8;
    left: 685px;
    top: 857px;
    font-size: 18px;
}
#apDiv26 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:10;
    left: 36px;
    top: 450px;
}

HTML:

<body onLoad="MM_preloadImages('f_h.png', 'f_h.png','t_h.png','g+_h.png')">

<div id="center">
<div id="apDiv18">Follow Us On:</div>



<div id="slideshow">
    <img src="house_slide1.png" alt="Slideshow Image 1" class="active" />
    <img src="house_slide2.png" alt="Slideshow Image 2"/></div>


<div id="header"></div>
<div id="apDiv28"><script type="text/javascript" src="http://forms.aweber.com/form/.js"></script></div>
<div id="apDiv6"></div>

<div id="header">
<div id="header_content">
  <div id="apDiv17">
  <img id="3" src="logo_m_1.png" width="83" height="83"></div>
                                </div>
                                </div>

  <div id="apDiv8">
    <div id="apDiv19"></div>
  <div id="apDiv21">


    <div id="F"><a href="facebook.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('FB','','f_h.png',1)"><img src="f.png" name="FB" width="50" height="44" border="0"></a></div>

    <div id="T"><a href="twitter.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Twitter','','t_h.png',1)"><img src="t.png" name="Twitter" width="50" height="44" border="0"></a></div>

    <div id="Gplus"><a href="google.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('g+','','g+_h.png',1)"><img src="g+.png" name="g+" width="50" height="44" border="0"></a></div>

</div>

  <div id="apDiv9">
  <p align="center"><br>
This is just plain text for my footer</p>
<p align="center"><span class="disclaimer">©</span><span class="disclaimer_dark">Foot</span><span class="disclaimer">er</span> All Rights Reserved</p>
</div>

</div>
</div>
  • 3 Contributors
  • 5 Replies
  • 151 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by <M/>
Member Avatar for lps

First of all, please do try to search the answer by yourself instead of posting all of your code here and wish other to solved every doubt of yours as similar question is asked for hundred of times already.
Anyway, I will still answer to this. Add a fix width to your body and set the margin to auto. eg. body{width:1000px,margin:auto;}. And, do remember to check your DOCTYPE to make it work.

Member Avatar for <M/>

I see, and i do realize I ask a lot of questions.
Isn't my container div already set to having 1000px and margin: auto?

Member Avatar for <M/>

Live Previews of the page look different through D.W. then it does when its uploaded...

Member Avatar for JorgeM

Your div with an ID of "center" is horizontally centered. The problem is the way you are applying the styles to the other divs. I do not recommend that you apply the absolute position to the remaining divs.

I think it would be easier to use floats, different heights and widths, and/or relative positions if needed.

Member Avatar for <M/>

I'll work on that, thanks :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.