Can someone help me center properly

Discussion in 'CSS' started by simonspurr, Nov 28, 2008.

0
  1. #1
    I always thought that margin: 0 auto; padding 0; centered a layout, but i have been trying to get three div classes centered and cant do it.

    Here is the code I have so far.

    HTML:
    <html>
<head>

<meta name="description" content="Describe the webpage in as keyword rich text as you can." />
<meta name="keywords" content="keyword 1, keyword 2, keyword 3 etc" />
<title>Targeted Keyword - Website Title</title>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<div class="header">
</div>

<div class="nav">
</div>

<div class="main">
<h2>Main Section</h2>
</div>

<div class="sidebar">
<h2>Sponsors</h2>
</div>

<div class="sidebar2">
<h2>Sponsors</h2>
</div>

<div class="footer">
</div>

</body>

</html>
    Code (markup):
    CSS:
    * {
margin: 0; padding: 0; align: center;
}

body{ 
background-color: #DFDFDF;
font-family: arial, verdanas, sans-serif;
font-size: 12px;
}

.header{
width: 100%;
height: 180px;
margin-top:0;
background-color: #333333;
}

.nav{
width: 100%;
height: 30px;
background-color: #BFBFBF;
}

.main{
float: left;
background-color: #ffffff;
width: 600px;
height: 800px;
margin-top: 25px;
margin-left: 15px;
margin-bottom: 15px;
}

.main h2{
background-color: #6F6F6F;
width: 600px;
height: 30px;
font-size: 18px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
font-weight: normal;
text-align: center;
}

.sidebar{
float: left;
background-color: #ffffff;
width: 200px;
height: 800px;
margin-left: 15px;
margin-top: 25px;
margin-bottom: 15px;
}

.sidebar h2{
background-color: #6F6F6F;
width: 200px;
height: 30px;
font-size: 18px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
font-weight: normal;
text-align: center;
}

.sidebar2{
float: left;
background-color: #ffffff;
width: 200px;
height: 800px;
margin-left: 15px;
margin-top: 25px;
margin-bottom: 15px;
}

.sidebar2 h2{
background-color: #6F6F6F;
width: 200px;
height: 30px;
font-size: 18px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
font-weight: normal;
text-align: center;
}

.footer{
float: left;
width: 100%;
height: 40px;
background-color: #666666;
}
    Code (markup):
    So if i want the entire thing centered, how would I go about doing that? Can anyone help me out?
     
    simonspurr, Nov 28, 2008 IP
  2. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    A couple things:
    First, "align:center" should be "text-align:center". ("Align" isn't a CSS attribute.)

    Second, if you're trying to center the entire layout, I'd wrap the contents inside of one div, naming it something like "wrapper", or "container". Then use "margin:0 auto" on that wrapper div. (As you probably read, IE needs "text-align:center" in order for the centering to work. I usually include this in the declarations for "body", but including it with * should work too, I guess.)

    Anyway, you were right about "margin:0 auto". The padding declaration isn't necessary for the centering, though. Hope that helps! Take care.
     
    katendarcy, Nov 29, 2008 IP
  3. simonspurr

    simonspurr Peon

    Messages:
    604
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    resolved now, i found another site that helped me
    thanks katendarcy, urs helped
     
    simonspurr, Nov 29, 2008 IP