Question

So I have a container called banner within a container called main as so:

<div id="main"> <!-- BEGIN MAIN -->
<div id="banner"> <!-- BEGIN BANNER -->
</div> <!-- END BANNER -->
</div> <!-- END MAIN -->

Main is a gradient and banner is the banner I want to have kind of in the middle of that gradient. Left and right auto works great. But when I try to put a margin of 10px on top of the banner, both the main and banner move down. How do I make it so only the banner moves down? Thanks a bunch!

#main {

width: 1200px;
height: 440px;
background-image: url(../website/images/background_bg.png);

}

#banner {

width: 966px;
height: 367px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-image: url(../website/images/banner.png);

}

Answer 1

Add 10px of padding-top in your #main and it will solve the problem.

so you’ll have:
#main { padding-top: 10px; ... }