4 replies [Last post]
rescue27
Offline
newbie
Virginia
Last seen: 17 years 16 weeks ago
Virginia
Joined: 2004-09-29
Posts: 6
Points: 0

#left
   {
   width: 20%;
   float: left;
   background: #ccc;
   }

#centre
   {
   width: 60%;
   float: left;
   background: #777;
   }

#right
   {
   width: 20%;
   float: left;
   background: #ccc;
   }

Go to: http://individual.utoronto.ca/dmurr/test.html to see it in action.

This works fine in Firefox 1.0 PR but in IE 6.0, the right-most column (#right) will sometimes fall under the left column at certain browser window widths (this behaviour is most evident when resizing the browser window). This doesn't happen at all in Firefox.

Can anyone give me an idea of how to correct this? I searched the forums but wasn't able to find anything directly relevant — maybe I'm searching on the wrong keywords, though.

Thanks!

xlee
Offline
Regular
Last seen: 13 years 29 weeks ago
Timezone: GMT+8
Joined: 2004-05-15
Posts: 17
Points: 0

3-column CSS layout problem (right col slides under in IE 6)

Hi rescue27

add the below IE style sheets.

body ( word-wrap: break-word; )

Hope it works.

rescue27
Offline
newbie
Virginia
Last seen: 17 years 16 weeks ago
Virginia
Joined: 2004-09-29
Posts: 6
Points: 0

3-column CSS layout problem (right col slides under in IE 6)

Thanks for the suggestion. I tried it but nothing seemed to change. The only way I can get IE to not wrap the right-most div under is if I don't specify a width at all for that particular div.

But then it ends up not filling the entire space sometimes. Ugh.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

3-column CSS layout problem (right col slides under in IE 6)

Hi rescue27,
You could try something like adding margin-right:-2px; to the #right.
That should stop the column dropping until the content can't fit across the screen.

It's also a good idea to add display:inline; position:relative; to floats as it helps fix numerous IE bugs.

Hope that helps

rescue27
Offline
newbie
Virginia
Last seen: 17 years 16 weeks ago
Virginia
Joined: 2004-09-29
Posts: 6
Points: 0

3-column CSS layout problem (right col slides under in IE 6)

That seems to have worked, thanks very much!

Tony wrote:
Hi rescue27,
You could try something like adding margin-right:-2px; to the #right.
That should stop the column dropping until the content can't fit across the screen.

It's also a good idea to add display:inline; position:relative; to floats as it helps fix numerous IE bugs.

Hope that helps