I have a div container with a class assigned to it, this container appears 4 times vertically, and each one has a margin of 10px at the bottom.

 

However, there is an issue i am having, the margin seems to dissapear down the page and the containers have no gaps between them?

 

i am doing something wrong or is there a fix for this?

 

thanks.

I'm guessing it's margin collapsing.

 

http://www.researchkitchen.de/blog/archive...ncollapsing.php

 

I don't understand it perfectly.

Hi Mark, how are you positioning the divs?

Hi Mark, how are you positioning the divs?

 

 

relatively is this not correct?

Relatively using offset values or without offset values?

It might be better using float but without seeing a site/code its hard to say.

Have you got a live link?

yeah sure heres the link

 

(very early stages of re-coding the site in xhmtl and css then seo, id like to re-design it completely but they didnt want that.)

 

www.marksimons.co.uk/pegasus

 

the divs question are on the right. in FF the 'exclusive top up cover is too close to the supplier info. but fine in IE7

 

thanks

It's because your images inside Supplier Info are floating, so they're not being included in the height of the box.

 

<div style="clear:both"></div> - adding that inside "product_cont" div is a quick fix.

 

You should get Firebug for FF and use the Inspect button to see all this stuff - https://addons.mozilla.org/en-US/firefox/addon/1843

Stardog is right. By using Firebug, you can see that the bottom margin is being applied but it starts from the bottom of the text:' Official supplier to Isuzu Ireland'.

IE looks like it is adding the bottom margin starting from the bottom of the floated image (incorrectly).

You could try putting some extra bottom padding on the second paragraph in the div so that Firefox starts the bottom margin from lower down and appears the same as IE.

The page title says "4x4 Hartops", shouldn't that be "hard-tops". Just pointing a small detail there

Hey mark,

 

This problem is creating as you have made the logo to float:right;. So for this you need to add overflow:hidden; to .product_cont. See below

 

.product_cont {
position: relative;
margin-bottom: 20px;
width: 570px;
overflow:hidden;
}

Hey mark,

 

This problem is creating as you have made the logo to float:right;. So for this you need to add overflow:hidden; to .product_cont. See below

 

.product_cont {
position: relative;
margin-bottom: 20px;
width: 570px;
overflow:hidden;
}

 

thanks a lot, this works fine! appreciate it