Wed, 2009-07-01 14:21
Hello,
I think the code sample probably explains better what I'm trying to do, but here is the scenario anyway:
I have a left div and a right div. In IE, the text is rendered larger, so the left column in my site is not the same length as the right column. When this is the case, i would like the left column to "overspill" - as illustrated in this diagram below. 1 = column 1 content, 2 = column 2 content...
12
12
12
11 (extra text in 1, now occupies both cols)
11
11
I'm not sure how to go about this at all without using fixed widths for everything and making a new div under the 2 columns. Can anyone help please?
Thanks in anticpation..
<html> <body> <p>A line of text</p> <div id="colLeft" style="float:left; width:350px; border-right:10px solid rgb(255, 255, 255); border: 1px solid #D8D8D8;"> <p>text 1 goes here and here</p> <p>text 2 goes here and here</p> <p>text 3 goes here and here</p> <p>text 4 goes here and here</p> </div> <div id="colRight" style="margin-left: 360px; width:350px; border: 1px solid #D8D8D8;"> <p>The right column is shorter than the left column. When this is the case, I want the overflowing text in the left div to occupy the width of both cols.</p> </div> <br clear="right" /> </body> </html>