CODEWITHSUNDEEP
htmlcssmargin
Keith
Keith

Reputation: 147

CSS - Margin-top won't work on one selector, but does in compatability mode

I am making a website and have split the site into the usual header, maincontainer and footer divs. The maincontainer contains 3 extra divs and all 3 divs (section 1,2,3) have a margin-top: 5px command associated to them. The first 2 divs (section 1 and 2) work perfectly, but the 3rd div (section 3) doesn't work at all. It just stays glued beneath section 2. However, if I go to IE compatibility mode, the 3rd div will drop down by the 5px specified in the CSS.

Code below. CSS:

#middlecontainer {
width: 960px;
height: auto;
}

.section1, .section2, .section3{
width: 960px;
margin-top: 5px !important;
}

HTML:

<div id="middlecontainer">
<div class="section1">
<div class="promo1">
<h1>Celebrate the real flavour of Indian cuisine at Mela.</h1>
<p>&nbs</p>
<p>&nbsp</p>
</div>
<div class="promo2">
<img src="images/home-1.jpg" alt="Mela West End, London" />
</div>
</div>
<div class="section2">
<div class="promo3">
<img src="images/mela-limitless.gif" alt="Up to 50% off Mela Limitless" />
</div>
<div class="promo4">
<img src="images/gift-vouchers.gif" alt="Mela's Gift Vouchers" />
</div>
<div class="promo5">
<img src="images/food-1.jpg" alt="Mela Curries" />
</div>
</div>
<div class="section3">
<div class="promo6">
<img src="images/visit-redhill.gif" alt="Visit Mela Redhill in Surrey" />
</div>
<div class="promo7">
<img src="images/recipe-of-the-month.jpg" alt="Mela's Recipe of the Month" />
</div>
<div class="promo8">
<img src="images/cookery-class.gif" alt="Did you buy a cookery class" />
</div>
</div>
</div>

If needed I can provide the CSS code for the .promo divs, but as they are child elements I didn't think that would effect the parent div.

Keith

EDIT: Here is the code put into jsFiddle, it seems to work fine in here though so I am completely stumped as to why it won't work in my browser. http://jsfiddle.net/8xpxH/4/

Upvotes: 1

Views: 1610

Answers (1)

Christoph
Christoph

Reputation: 51241

Because you float your promo-elements, the parent elements (.sectionX) have height 0. This messes up your margins.

You need to clear the floats. Easiest way to to this is to set overflow:auto and everything is fine. (auto might make (unnecessary) scrollbars appear which can be problematic, so if you are sure, your stuff fits perfectly and there will be no overflow issues take hidden instead.)

.section1, .section2, .section3{
   width: 960px;
   margin-top: 5px;
   overflow: hidden;
}

Upvotes: 2

Related Questions