margin-top css doesn't work unless large value

I think I'm seeing strange behavior here that is inconsistent with my understanding of floats and margins. 1) I have two ul elements floating and a div sits under them without any clear: both property - that is, I don't have a clear:both property specified. That's strange because it's supposed to be ignoring the floats but it doesn't and sits under the floats (which is what I want but usually it requires clear: both). 2) The two ul elements have no bottom margin and so I try to assign the div below them a top margin yet it won't move at all until I assign it a huge top margin of 5em. This is odd behavior because there should be no margins competing here since the ul elements don't have any. 10px top margin should be able to work for the div but it doesn't. Here's what I have:

<style>
#contactUs {
width: 500px;
margin: 0 auto;
overflow: auto;
font: normal normal normal 1em/1.2 Arial, Verdana, sans-serif;
}

#contactUs h1 {
text-align: center;
color: #939598;
font-weight: bold;
}

#contactUs ul {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 1.5em;
font: normal normal normal 1em/1.5 Arial, Verdana, sans-serif;
}

ul#contactFort {
float: left;
width: 260px;
margin: 5px 0 0 5px;
}

ul#contactPrin {
float: right;
width: 230;
margin: 5px 0 0 5px;
}

#mailTo {
text-align: center;
margin-top: 1em;
}

#contactUs a {
text-decoration: none;
color: green;
}
</style>
<div id="contactUs">
<h1>Contact Us</h1>
<ul id="contactFort">
<li>200 Wells Drive</li>
<li>Yellow Springs, OH</li>
<li>800-000-0000</li>
</ul>
<ul id="contactPrin">
<li>100 Main St.</li>
<li>Printown, OH</li>
<li>800-000-0000</li>
</ul>
<div id="mailTo"><a href="mailto:info@us.com">info@us.com</a></div>
</div>


Thanks for any insight.

i think that if you float the two ul elements to the left and use clear both property in your mailto div you can get what you want... and then add some more styles for it looks good

let me know if it was useful

regards

The DIV is sitting underneath them because without clear both because there is no room for it to sit next to the UL's, because the container has a set width of 500px. However you should be adding clear both to the DIV anyway if you want a margin, why don't you want to use this?

You are also missing the px declaration here (see bold) which could cause additional problems:

ul#contactPrin {
float: right;
width: 230;
margin: 5px 0 0 5px;
}

there is no room for it to sit next to the UL's, because the container has a set width of 500px.
[/CODE]

Thanks for reply. I removed the ".com" and it ignored the floats and pushed up. I added back the ".com" and it behaved like as if it had clear: both applied:

<div id="mailTo"><a href="mailto:info@us.com">info@us.com</a></div>

Is this me losing my head or is there something about this in the specification?