8

My problem is simply centering a div.

At the moment, I just have a bare bones html file. I have no idea why margin: 0 auto isn't working.

Here is the layout of my html:

<style type="text/css">

#header {
    width: 100%;
    margin: 0 auto 20px auto;
    height: 50px;
    background-color: #0F6;

}
#navigation {
    width: auto;
    float: right;
        margin: 0 auto;
    display: inline-block;
}
#content {
    background-color: #936;
    margin: 0 auto;
    width: 960px;
    position: relative;
    min-width: 720px;
    max-width: 960px;
}
footer {
    background-color:#0F6;
    width: 100%;
    height: 200px;
}
body {
    background-image: url(images/dark_wall.png);
}

</style>
</head>
    <body>
<div id="header">
  <div id="navigation">This is the nav</div>
</div>

<div id="content">
<div id="content_top">
</div>
<div id="content_middle">
</div>
<div id="content_bottom">
</div>
</div>



<footer>
<div id="footer_div_1"><p>DIV #1</p>
</div>
<div id="footer_div_2"><p>DIV #2</p>
</div>
<div id="footer_div_3"><p>DIV #3</p>
</div>
</footer>



</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer").css("position","fixed").css("bottom",0);
  }
});
</script>

<!– Add conditional for IE7 + 8 support –>   
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

The jquery at the bottom is simply to make my footer a sticky footer as it is the simplest method I've learned to use that yeilds the least amount of problems down the line.

Here are the contents of my external css file

@charset "utf-8";
/* CSS Document */

body {
  min-width: 960px;
  background:url(../img/dark_wall.png);
}

html, body {
    margin: 0;
    border: 0;
    width: 100%;
    font-size: 100%;
    font-family: Impact, "Courier New";
}

#footer_div_1 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_2 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_3 {
    display: inline-block;
    width: 33%;
    text-align: center;
}
Garrett
  • 4,007
  • 2
  • 41
  • 59
user3035285
  • 83
  • 1
  • 1
  • 4

1 Answers1

12

To center the div set width for div and set margin-left and marign-right as auto.

Don't use float property in that div and also don't use display: inline; and display:inline-block; in that div

You don't have any content between div id="content", thus that div has nothing to display. Just add some content or set height for the div id="content".

salahuddin
  • 248
  • 2
  • 11
  • 3
    WOW.... T__T I'm retarded...... Thank you for your help. It fixed my problem perfectly. I'll keep this in mind for future reference. I just got caught up in preparing the structure that I didn't realize that adding content activates certain parts of my css. Again, thanks. =] I really appreciate it. – user3035285 Nov 26 '13 at 07:54