I wanted to have two columns on one section of a web page where the fist column was all left-aligned on the page, but the second column was aligned to the right of the page.
I used the DIV
tag to create the two columns. I used <div style="float: left;">
for the left columan and <div style="float: right;">
for the right column. I enclosed both of them in an outer DIV. Since I
wanted to have a top margin of 75 pixels for the outer DIV to separate it from
the material above, I used <div style="margin-top: 75px;">
for it. But when I viewed the page, the material in the two columns wasn't
appearing the way I wanted it to appear. I then tried adding overflow:
auto to the outer DIV as shown below.
<div style="margin-top: 75px; overflow: auto;">
<div style="float: left;">
Stuff in left column
</div>
<div style="float: right;">
Stuff in right column
</div>
</div>
<p>Stuff below</p>That looked fine when viewed in Firefox, but Internet Explorer showed the "stuff below" between the two columns.
I was able to resolve the problem by inserting a
complete "cleared" element last in the container as explained at
How To Clear Floats Without Structural Markup By adding another DIV
below the two column DIVs but within the outer DIV, I was able to get the
results I wanted in both Internet Explorer and Firefox. That DIV was just
<div style="clear: both;"></div>.
So I then had the following HTML code for the page.
<div style="margin-top: 75px; overflow: auto;">
<div style="float: left;">
Stuff in left column
</div>
<div style="float: right;">
Stuff in right column
</div>
<div style="clear: both;"></div>
</div>
<p>Stuff below</p>References:
-
2 Column Div float right and left child divs outside parent
Date: August 31, 2010
Stack Overflow -
How To Clear Floats Without Structural Markup
By: Big John
Created May 14, 2004
Last updated: July 2, 2008
Position Is Everything
