Menu
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;
}
594
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".
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
