Tue, 2010-06-15 02:21
I've been having a problem lately setting up my template for this site using div's. I can center my wrapper div, but the inner content wont seem to center, even trying to use margin left/right: auto and all the other tips online, but somethings just not working... I would like to just take everything within the wrapper and center it within.
-----------------------
.....
template
xxx
xxx
xxx
***
xxx
xxx
###
----------------------------------------- css:
#wrapper {
width:1000px;
height:550px;
background-color:#000;
border: 1pt dashed white;
margin-left: auto;
margin-right: auto;
text-align:center;
margin: 0 auto;
}
#left {
height: 350px;
width: 200px;
border: 2px solid white;
float:left;
font-size: 0pt;
}
#center {
height: 250px;
width: 550px;
border: 2px solid white;
float:left;
background-color:#fff;
}
#main {
height: 250px;
width: 550px;
border: 1px solid white;
float:left;
font-size: 0pt;
background-color:red;
}
#products {
height: 100px;
width: 550px;
border: 1px solid white;
float:left;
font-size: 0pt;
background-color:#444;
}
#shirt1 {
height: 100px;
width: 130px;
border: 1px solid white;
background-color:#c00000;
float: left;
margin-left:auto;
margin-right:auto;
}
#right {
height: 350px;
width: 200px;
border: 2px solid white;
float:left;
font-size: 0pt;
}
#header1 {
height: 50px;
width: 300px;
border: 2px solid white;
float:left;
font-size: 0pt;
}
#header2 {
height: 50px;
width: 300px;
border: 2px solid white;
float:left;
font-size: 0pt;
}
#header3 {
height: 50px;
width: 300px;
border: 2px solid white;
float:left;
font-size: 0pt;
}
#footer {
height: 25px;
width: 900px;
border: 2px solid white;
float:left;
font-size: 0pt;
margin-left: auto;
margin-right: auto;
}
body {
background-color: #000;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin-left: auto;
margin-right: auto;
}
h1 {color:maroon;font-size:20pt;}
---------------------------------------------
I know its probably just a stupid mistake but please help. thanks.
Tue, 2010-06-15 02:27
#1
sorry guys, heres the code in
sorry guys, heres the code in my html page: // <div id="wrapper"> <h1>template</h1> <hr /> <hr /> <div id="header1">xxx</div> <div id="header2">xxx</div> <div id="header3">xxx</div> <div id="left">***</div> <div id="center">xxx <div id="main">xxx</div> <div id="shirt1"></div> <div id="shirt1"></div> <div id="shirt1"></div> <div id="shirt1"></div> </div> <div id="right">###</div> <div id="footer">***</div> </div> //<code><code>
Tue, 2010-06-15 08:02
#2
#wrapper is pretty wide,
#wrapper is pretty wide, centered yes, however all it's child elements appear to be float:left so will sit to the left edge of their respective parents. With #center @ 550px width approx half that of it's parent it is not going to be or appear centered. Re think why you are floating so many elements and perhaps remove a few of those floats in favour of auto widths, or set widths and auot margins.