Why no align center

Dat

11-04-2009, 07:06 AM

It wont center? Why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
body, html {
font-family: Helvetica, Verdana, Arial, sans-serif;
color:#565656;
font-size: 12px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
a {
color: #EC0A8B;
text-decoration: none;
}
a:hover {

text-decoration: underline;

}
#wrap {
}

#content {
float: left;
margin-right: 5px;
margin-left: 5px;
margin-top: 30px;
width: 980px;
border-color: #dedfdd;
border-width: 8px;
border-style: solid;
}

#col-left {
float: left;
}

#col-right {
float: right;
}

#main-content {
padding-right: 15px;
background-color: #f9ff8a;
margin-left: 15px;
margin-top: 20px;
width: 540px;
}

#main-content .featured {
padding: 15px;
width: 540px;
color: #C4C4C4;
background-color: black;
}

#main-content .featured h2 a {
color:#FFFFFF;
font-family:Georgia;
font-size:19px;
font-weight:normal;
padding:10px 0 2px;
}

#main-content .featured p.post-details {
margin-top: 5px;
margin-bottom: 15px;
padding-left: 17px;
background:transparent url(images/post_details.gif) no-repeat scroll 0;
font-size: 12px;
font-style: italic;
color: #787878;
}

#sidebar {
background-color: #a2ff88;
width: 400px;
}

.post {
}

.left {
float: left;
}

.right {
float: right;
}

#header, #wrap, #footer {
margin:0 auto;
}

</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div id="col-left">
<div id="main-content">
<div class="post wrap">
<div class="featured">
<h2>
<a href="#">Molestie innonummy Libero</a>
</h2>
<p class="post-details">
by
<a href="#">Dat</a>
on 12/25/09
</p>
<a href="#"><img src="images/thumb.png"</a>
</div>
</div>
</div>
</div>
<div id="col-right">
<div id="sidebar">
dd
</div>
</div>
</div>
</div>
</body>
</html>

abduraooft

11-04-2009, 07:30 AM

Dat

11-04-2009, 07:33 AM

#content {
/* float: left;*/
margin-right: auto;
margin-left: auto;
margin-top: 30px;

width: 980px;
border-color: #dedfdd;
border-width: 8px;
border-style: solid;
}btw, why do you need <div id="warp"> ? (hope you meant wrap there ;))
Edit, but how do i make the wrap adjust to the middle. cause if i remove the float none of my contents stays inside the border.

abduraooft

11-04-2009, 07:36 AM

Edit, but how do i make the wrap adjust to the middle. cause if i remove the float none of my contents stays inside the border.You need to clear your floats and applying another float isn't the right way to do this.
Try applying overflow:auto; to #content. See http://www.quirksmode.org/css/clearing.html
(Or http://www.codingforums.com/showthread.php?p=617640#post617640
www.positioniseverything.net/easyclearing.html)

Excavator

11-04-2009, 07:50 AM

Hello Dat,
In your CSS you have margin:0 auto; on #header, #wrap, #footer but that won't work until you set a width.
Add a width to the wrap that's containing your site, like this -
#wrap {
width: 1006px;
margin: 0 auto;
}

Remove that float:left; like ab said, and replace it with overflow: auto; to clear your floats. Here's a site (http://www.quirksmode.org/css/clearing.html)that explains how that works.