Different results w/ floated DIVs in different browsers

[bukwus]

HelloI've begun designing pages with DIVs instead of tables and I've found that in Firefox, when you float two or more DIVs next to each other and then place another DIV with margin-top below the floated DIVs, the margin is ignored while in IE it is observed. Is there a way around this?Here's the code:DIV { margin-top:10px;}.column { float:left;}.third { width:32%;}.coloredTextBox { padding:2px; background-color:#575F90; color:#ffffff; font-weight:bold; clear:both; font-size:110%;} <div class="column third"> content </div> <div class="column third"> content </div> <div class="column third"> content </div> <div class="coloredTextBox">By Agency</div>

[Nim199]

Not sure if this will help, but write 'div' in lowercase:div {margin-top:10px;}Question: Are you using XHTML?Link:http://www.w3schools.com/css/css_padding.asp

[bukwus]

Thanks for the reply FermatThe lowercase didn't work. I'm not using XHTML. Is that a good thing or bad thing?

Not sure if this will help, but write 'div' in lowercase:div {margin-top:10px;}Question: Are you using XHTML?Link:http://www.w3schools.com/css/css_padding.asp

[jesh]

You might try putting the content in a wrapper div and then using a br to clear the floats:

<div id="wrapper"><div class="column third">content</div><div class="column third">content</div><div class="column third">content</div><br style="clear: left;" /><div class="coloredTextBox">By Agency</div></div>