CODEWITHSUNDEEP
csshtmlwebmargin
Knoland
Knoland

Reputation: 99

margin: 0 auto; not centering content

I'm working on a webpage, and i have the width of my div tag set and am using margin: 0 auto; but my content is still on the left. I'm using OS X 10.7.3, Chrome 19.0.1084.46, and Dreamweaver CS6

here's my CSS:

@charset "UTF-8";
body {
    text-align: center;

    display: block;
}
.container {
    float: left;
    height: 2000px;
    width: 964px;
    margin: 0 auto;
    text-align: left;
}
.header {
    float: left;
    height: 117px;
    width: 964px;
}
.leftcol {
    float: left;
    height: 1715px;
    width: 534px;
    margin-top: 20px;
margin-right: 10.125px;
    margin-bottom: 20px;
    margin-left: 30px;
}    
.navbar {
    float: left;
    height: 69px;
    width: 964px;
}
.rightcol {
    float: left;
    height: 1715px;
width: 306px;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 20.25px;
}
.video {
    float: left;
    height: 301px;
    width: 534px;
}
.pagebody {
    float: left;
    height: 1749px;
    width: 920px;
    background-color: #FFF;
    margin-top: 0px;
    margin-bottom: 21.25px;
    margin-left: 22px;
}

And the HTML that uses the CSS: 

<body>
<div class="container">
  <div class="header"><img src="Images/Top.png" width="964" height="117" alt="Intelligentlemen Films" /></div>
  <div class="navbar"><img src="Images/RibbonMenu.png" width="964" height="69" alt="Navbar" /></div>
  <div class="pagebody">
    <div class="leftcol">
        <div class="video"><iframe width="534" height="301" src="http://www.youtube.com/embed/kMBEuol6aUc" frameborder="0" allowfullscreen></iframe></div>
     </div>
     <div class="rightcol"><img src="Images/intelligentlemen button.jpg" width="300" height="61" alt="Intelligentlemen" /></div>
    </div>
   </div>
 </body>
</html>

Upvotes: 1

Views: 5102

Answers (2)

pyronaur
pyronaur

Reputation: 3545

First of all, You can't float left and margin auto horizontally. What's the point anyway. You want to have your container centered, not pushed to the left side. Now that gives you trouble probably, because things don't work out as you'd want them to, because every other element you have there, is floated to the left.

Elements like your header and navbar shouldn't even be floated, they would be perfectly fine even if you didn't float them, they just need to be cleared. You need some reading to do.

Bottom line. When you're floating, you need to clear your floats after you're done with them.

Here is your reading material: If it's the only thing you do, read at least The Great Collapse on CSS Tricks, but I'd suggest reading through it (and search for more, until it sticks)

http://css-tricks.com/all-about-floats/
http://www.alistapart.com/articles/css-floats-101/
http://www.positioniseverything.net/easyclearing.html

Floats are very important to understand.

p.s. Don't define height on your container, you want that to be flexible, don't you ? I know you're defining the height, again, because you don't understand CSS floats fully. That's why you need to do the reading :)

Good Luck :)

Upvotes: 4

reisio
reisio

Reputation: 3242

Because you’ve also applied float: left;.

You should also start your source with a doctype declaration, such as <!doctype html>, and ensure your HTML is valid, as well as your CSS.

Upvotes: 3

Related Questions