I have set up a container named main that contains another container called banner, like this:
<div id="main">
<div id="banner"></div>
</div>
Main has a gradient background and I want the banner to be positioned in the middle of that gradient. Using margin-left and margin-right works fine. However, when I add a top margin of 10px to the banner, both the main and banner are pushed down. How can I make it so only the banner moves down? Thanks!
#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);
}