I seem to be missing something in my understanding. If I leave off absolute
positioning, shouldn't nested DIV/SPAN be displayed inside the parent, and
ones outside that display separately?
Here is some sample code:
----------------------------------------------------------
<div id='header' style='border:r ed solid medium'>
<p>This is the Header</p>
</div>
<div id='container' style='border:g reen solid meduim'>
<span style='border:r ed dashed medium; float:left;'>
<p>This is the left column</p>
</span>
<span style='border:b lue dashed medium; float:right;'>
<p>This is the right column</p>
</span>
</div>
<div id='footer' style='border:g reen dashed medium;'>
<p>This is the footer</p>
</div>
<div id='lost' style='backgrou nd:yellow'>
<p>Where is this one</p>
</div>
--------------------------------------------------------
The borders are there just to see how things display.
The INTENT is to have a header across the full page, two columns below that,
and a footer underneath all of it. Like:
+---------------------+
| HEADER |
+---------------------+
| l-col | r-col |
+---------------------+
| FOOTER |
+---------------------+
The code above works in IE & Opera, but the footer overlaps the left & right
columns in Firefox & Netscape. The "container" division is practically
nonexistent.
Eliminating the container division results in the same display - with the
columns appearing to be inside the footer.
What am I missing - to make the footer display UNDER the container DIV,
without using absolute positioning?
