[SOLVED] simple div problem

[hhelen]

Hi, I am currently updating an existing subsite for my company which I did not originally make.

I have mainly just changed the css but in order to apply a white border around the site I have added two new divs. IE displays the site fine but in Firefox the border around the container div stops just below the banner instead of encompassing the site.

This is no doubt a very simple problem but one I am unable to fix so any help would be greatly appreciated.

The link is http://interactive-learning.info/productstest/

Cheers

[aso186]

Add this to your CSS;

Code: Select all

#container:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

[hhelen]

Thank you, you're an absolute star!

[Jack Franklin]

aso,

Do you mind explaining quite what the content:'.'; bit is all about?

[aso186]

This technique enables designers to clear floats without having to add unnecessary source markup.

The :after pseudo allows content to be inserted after the element in question. Although IE does not understand it, we needn't worry since IE clears floats by itself anyway (incorrectly).

The content is simply a dot (.), which is then hidden and set to display:block.

However, the important line is clear:both. This clears any floats within the element itself, forcing it to fully encase them.



Full details of solution: Clearing floats without source markup.

Details of :after pseudo at W3Schools.

[Jack Franklin]

Thanks Alex, all sorted. What an amazingly easy method