[thelist] CSS: Don't understand how floats are supposed to work.

[Minh Lee Goon]

Greetings all,
I'm using Firefox more and more in my quest to be as standards-compliant 
as possible. But what I got used to with IE now has come back to bite me 
(I'm sure for the better) in Firefox. I'm sure it's a CSS issue, so I'm 
posting it here first, hoping you can help me. Here's the simplified 
version of my existing layout:

<div id="Container" style="clear:both;">
      <div id="Header" style="clear:both;"></div>
      <div id="Navigation" style="clear:both;"></div>
      <div id="Content" style="clear:both;">
           <div style="clear:both;">
                <div id="Instructions" style="float:left;"></div>
                <div id="Links" style="float:right;"></div>
           </div>
      </div>
      <div id="Footer" style="clear:both"></div>
</div>

Here's the URL: http://maverick.sdstate.edu/EdTech/Training/

What I end up with is the Footer layer showing up in the middle of the 
Content layer. I had just learned about "clear:both", hoping it would 
cure exactly the problems I'm having now.

Can someone please tell me what I'm doing wrong? Is there a resource 
that will help me understand how floats work? Thanks in advance.

Minh Lee