PDA

View Full Version : div's not centering correctly in browser...not sure of the problem.


shutterleftopen
03-22-2011, 03:48 PM
css:

body {
background-color: transparent;
line-height: 1.25;
font-family: helvetica, arial, sans serif;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
/*end reset*/



p{
font-size:14px;
padding: 8px 10px 0 10px;
color: #212121;
}

p bold{
font-weight:bold;
color: #bc86bb;
font-size: 16px;
text-decoration: none;
}


/** navbar **/





#navigation
{
display: block;
width: 1083px;
height: 367px;
left: 0px;
position: relative;
background-color: transparent;
border: none;
z-index: 2;

}



/** end navbar **/



/* Main Styles */

#wrap{
width: 954px;
height: 1100px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
background-color: transparent;
}

#main{
clear:both;
}

#content{
position: relative;
background:url(../img/body.png) repeat;
width: 954px;
height: 1250px;
padding: 0 0px 0 0px;
margin: -100px 0px 0 64px;
overflow: hidden;
}

#left{
float: left;
width: 460px;
height: auto;
margin: 100px 0px 0px 0px;
}

#content .newshdr{
background:url(../img/news.png) no-repeat;
float: left;
margin: 0px 0px 10px 0px;
height: 90px;
width: 389px;
}

#content .newsbody{
background-color:transparent;
float: left;
margin: 0px 0px 0px 24px;
height: 341px;
width: 425px;
overflow-y:scroll;
overflow-x:hidden;
}

#content .specialshdr{
background:url(../img/specials.png) no-repeat;
float: left;
margin: 0px 0px 10px 0px;
height: 90px;
width: 389px;
}

#content .specialsbody{
background-color:transparent;
float: left;
margin: 0px 0px 0px 24px;
height: 341px;
width: 425px;
}

#content{
position: relative;
background:url(../img/body.png) repeat;
width: 954px;
height: 1250px;
padding: 0 0px 0 0px;
margin: -100px 0px 0 64px;
overflow: hidden;
}

#right{
float: right;
width: 460px;
height: auto;
margin: 100px 0px 0px 0px;
}

#content .eventshdr{
background:url(../img/events.png) no-repeat;
float: right;
margin: 0px 0px 10px 0px;
height: 90px;
width: 389px;
}

#content .eventsbody{
background-color:transparent;
float: right;
margin: 0px 24px 0px 0px;
height: 341px;
width: 425px;
overflow-y:scroll;
overflow-x:hidden;
}

#content .tomonthhdr{
background:url(../img/tomonth.png) no-repeat;
float: right;
margin: 0px 0px 10px 0px;
height: 90px;
width: 389px;
}

#content .tomonthbody{
background-color:transparent;
float: right;
margin: 0px 0px 0px 0px;
height: 341px;
width: 425px;
}





#footer{
clear:both;
padding: 0 0px 0 0px;
margin: 0px 0px 0 64px;
border: none;
width: 954px;
height: 600px;
background:url(../img/footer.png) no-repeat;

}

#footer .navi{
float:left;
padding-top: 70px;
padding-left: 15px;
}


#footer .facebook{
float:left;
padding-top: 80px;
left: 650px;
}


#footer .address{
float:right;
padding-top: 70px;
padding-right: 15px;
}


web page:

click here for site (http://thegraffititees.com/main.html)


--------------------------

my problem as you can see on the site is that the layout is slightly off center. i can't seem to find the problem as i have everything in the "wrap" div and the left and right margin's are set to auto. just want everything to be perfectly center in any browser and any screen. not resizing just centered on any computer. i don't think it's anything huge i just can't find the problem anywhere.

any help would be great. thanks in advance. and i'm still working on the site so it's not finished.lol.

edbr
03-23-2011, 02:23 AM
or is it? on content you have
margin: -100px 0px 0 64px;
remove the left margin from content, or add a border to wrap so you can see which is showing off centre

shutterleftopen
03-23-2011, 02:27 AM
the content is the body of the page. i used that because the top flash banner is wider. so the navigation is the part that is showing off center and it's location is left: 0px; so i'm not sure what else it could be. the wrap part is actually only 954px wide set and the banner is over 1000px wide so i wonder if that would be the problem?

DWcourse
03-23-2011, 02:29 AM
Your #wrap is 954px but your #navigation (which is in your #wrap) is width: 1083px so it's overflowing on the right. Set the width of #wrap to 1083px and it should work out (although that's wider than I would normally recommend).