• Locked
No replies
Wed, 2009-07-01 14:21
1984
Offline
newbie
Last seen: 13 years 30 weeks ago
Joined: 2009-01-25
Posts: 3
Points: 0

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>

Top
Tags: