Div won't go down in IE and displays weird in FF

[gokeeffe]

Hi

I am having the following problem, I am using the following css code to postion my 2 site map elements on the page.

#sitemapleft{
float:left;
width:49%;
background-color:#0033CC;
}

#sitemapright{
float:left;
width:50%;
background-color:#99CC33;
}

Which can be seen at http://www.askaboutvalidation.com/site_map.php

The div surrounding these divs has the following code

.b{
margin-left: 215px;
margin-right: 210px;
border:1px solid #006600;
padding-bottom:20px;
}

In IE it doesn’t seem to recognise it and in FF it’s height is a lot bigger than it should be.

I tried to clear them etc and use display block put that doesn’t work either.

Any help would be great

Regards

[samanime]

If you are referring to the extra white space at the bottom of your central div, either removing bottom-padding: 20px; or reducing it's height by 20 will reduce it's size and even it up with the invisible div to the left, which is about 10 pixels below where it looks visible. You can fix that problem the same way.

I recommend the Web Developer add-on for Firefox: http://chrispederick.com/work/web-developer/

The tools in the Outline section are especially useful because it will outline all block elements, custom elements, and more to let you see exactly what div is doing what.

Hope that helps.