Two columns-- float: left and right
Posted: Mon Apr 27, 2009 3:40 pm
I have a two column design where I want the text in the left column to visually appear first and to come first in markup as well.
I am currently using float: left with a width of 50% and float right with the same -- this appears to be the only way to make both play side by side without resorting to moving the left column into the second most spot in XHTML.
While this works they both now overlap the container element -- which ruins the existing design.
I have tried applying clear: both to the container as well as adding a <div> to the end of the columns and clearing that, such as:
This does not work either...can someone explain how clear should be used in this situation?
Cheers,
Alex
I am currently using float: left with a width of 50% and float right with the same -- this appears to be the only way to make both play side by side without resorting to moving the left column into the second most spot in XHTML.
While this works they both now overlap the container element -- which ruins the existing design.
I have tried applying clear: both to the container as well as adding a <div> to the end of the columns and clearing that, such as:
Code: Select all
<div class="col1"> Left column trext</div><div class="col2"> Right column trext</div><div style="clear: both"></div>Cheers,
Alex