Question

I have a fiddle showing this html/css problem here http://jsfiddle.net/mjmitche/T6PBn/9/.

I have a div of a with a class “mainmeal” (with the white background in the fiddle) that I’m trying to move down from the black navbar. The div’s width is narrower than the body of the page. However, when I put a top margin on the mainmeal div to push it down from the brower, the space created by the top margin is white (i.e. being styled by the css for “mainmeal”) and it extends the whole width of the body. Can you explain why this is happening and how to fix it?

What I wanted was for the space created by the margin to take the css of the containing div “main.”

Thanks

CSS

#header{
font-size: 24px;
background-color: #000; 
min-height: 25px;
 font-weight: bold;


}

#main {
   min-height: 300px;
   background-color: #b4db9b;
   width: 500px;
   position: relative;

}

.miracle {
    color: #1e6023;

}
.meal{
    color: #fff;

}

.mainmeal{
    background-color: #fff;
    width: 400px;
    height: 150px;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;


}

HTML

<div id="header">

    <span class="miracle">Miracle</span><span class="meal">Meal</span>

</div>

<div id="main">
    <div class="mainmeal">

       Main Meal

    </div>
    <div id="olddeals">
        <div class="column1">
        </div>
        <div class="column2">
        <div>
        <div class="column3">
        </div>

    </div>

</div>

Answer 1

This should solve your problem: http://jsfiddle.net/T6PBn/11/

#main {
   min-height: 300px;
   background-color: #b4db9b;
   width: 500px;
   position: relative;
   /* introduce this */
   padding-top: 20px;
}

.mainmeal{
    background-color: #fff;
    width: 400px;
    height: 150px;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
}