Float confuses me w/ other (more fixed) objects on screen

[sharp]

Good Day,

I updated the menu of the site and the header (in general) is better now... but I've erred in how the text wraps (for people w/ small browser windows) and can't figure out how to get it like I want it.

This seems like it should be something simple to fix, but all my efforts are teh fail.

The goal is to have "talk to a real person" move over the phone number (or the phone number under... whichever) as the screen narrows. That is really all I want as that'll take care of 95%+ of our users, but right now it slides under everything else and and then moves over the number only once it has reached the other side of the page..

Here is the site in question, just reduce your browser size and you'll see what I mean.
completeira.com

 

[webdes03]

Your website is blocked by our system at work so I can't actually see it. Based on your verbage above I'll offer a suggestion. Did you set the clear property of the div that the phone number is in? If not, or if it's not in a div, try the following to tell the phone number to only display after floated objects.

<div style="clear: both;">PHONE NUMBER</div>

 

[sharp]

Thanks, but it didn't work. Somebody knows this fix, and I'm sure it is a quick one... I that's just not me. Hopefully this will help you (or someone) see the issue. (I'm surprised our site is blocked by your work. Strange given the no-booze-or-women-or-poltics etc. nature of the site.

The source in question (may) be:
<div id="header">
<div class="doNotPrint">
<div id="call" style="clear: both;"><br />
TALK WITH A REAL PERSON: <span>888-595-7313</span>
</div>
<a id="logo" href="./index.html"><img src="./images/logo.png" alt="CompleteIRA" /></a>

<div class="nav">
<div class="block">
<ul>
<li><a href="./presentations.html">Presentations &amp; Documents</a></li>
<li><a href="./choosing-account.html">Checkbook IRA or 401k</a></li>
<li><a href="./alternative-investment.html">Alternative Investments</a></li>
</ul>
</div>
<div class="block">
<ul> <li><a href="./alliance.html">Professional Alliance</a></li>
<li><a href="./faq-home.html">Frequent Questions</a></li>
<li><a href="./contact-ira.html">Contact Us Directly</a></li>
</ul>
</div>
</div>

<div class="clear"></div><br /><br />
</div>


and then CSS of:
.nav{
margin:20px;
display:inline;
position:absolute;
left:300px;
}

.nav .block{
float:left;
display:inline;
border-left:1px solid #ccc; /* line on the left navigation */
margin:0 10px 0 0;
padding:0;
}

.nav ul{
margin:0;
padding:0 0 0 5px;
}

.nav li{
list-style:none;
padding:3px 0;
margin:0;
}


.clear{
clear:both;
padding:20px 0 0 0; /*increase the no to move the blue lines and text links on right down*/
}

.clear1{
clear:both;
}

#call{
color:#FF0000;
float:right;
margin:30px 10px 0 0;
display:inline;
}

#call span{
font-size:large; /*style for phone no*/
font-weight:bold;
}


#functions{
padding:0;
}

.rt{
float:right;
}

.superHeader{
padding:0;
margin:0;
}

.subHeader{
padding:0;
margin:0 auto;
border-bottom:1px solid #ccc;
width:95%;
}