CSS positioning

[dustinnoe]

I have the following mark-up bellow.  Using CSS I want the "Phone" information to display next to the "Address"
[code]
<div id='detail_contact'>
<div>
<h3>Contact Information</h3>
</div>
<div>
<div id='detail_contact_address'>
<h4>Address</h4>
Address Line 1<br />
                        City, State Zip
</div>
<div id='detail_contact_phone'>
<h4>Phone #</h4>
555-555-5555
</div>
</div>
</div>[/code]

I have tried the following CSS and can't understand why it will not work.

[code]
#detail_contact_address {
float: left;
}
[/code]

If I am thinking correctly that should work, but it doesn't in FF or IE

I also tried

[code]
#detail_contact_address {
position: absolute;
top: 0; left: 50%;
}
[/code]

and

[code]
#detail_contact_address {
display: inline;
}
[/code]

I'm scratchin my head here!  Any body know what's up?

[ToonMariner]

<div id='detail_contact'>
<h3>Contact Information</h3>

<div>
<div id='detail_contact_address'>
<h4>Address</h4>
Address Line 1<br />
                        City, State Zip
</div>
<div id='detail_contact_phone'>
<h4>Phone #</h4>
555-555-5555
</div>
</div>
</div>


h3 {
clear: both;
}

#detail_contact_address,
#detail_contact_address {
{
float: left;
width: 250px;
}