Every time I attempt to include margin-top: 30px to my box_1 and box_2 <div>, the bottom <div> is pushed down and disappears. It seems like my wrapper isn't expanding to accommodate the content.
How can I achieve a 30px space between the top and box_1/2 and bottom?
<html>
<head>
<title>Circle Motion</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="outer-wrapper">
<div id="wrapper">
<div id="top">
</div>
<div id="box_1">
<img src="chrome_400x400.png" />
</div>
<div id="box_2">
<img src="firefox_400x400.png" />
</div>
<div id="bottom">
<p>All Rights Reserved - CSS_maniac 2012 ©</p>
</div>
</div>
</div>
</body>
</html>
CSS
/* My Stylesheet */
html {
height: 100%
}
body {
background-color: grey;
}
#outer-wrapper {
height: 100%;
width: 1000px;
margin: 0px auto;
background-color: #EAFFDB;
-moz-border-radius: 15px;
border-radius: 15px;
}
#wrapper {
height: 100%;
width: 960px;
margin: 0px auto;
background-color: #EAFFDB;
overflow: hidden;
}
#top {
width: 900px;
height: 110px;
margin-top: 35px;
margin-left: 30px;
margin-right: 30px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
}
#box_1 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:left;
margin-left: 30px;
text-align: center;
}
#box_2 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:right;
margin-right: 30px;
text-align: center;
}
#box_1 img {
margin: 15px 0px;
}
#box_2 img {
margin: 15px 0px;
}
#bottom {
width: 900px;
margin: 0px auto 0px auto;
text-align: center;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
clear:both;
}
/* Classes */
.clear {
clear: both;
}