Problem with 2 column layout - content drops to the bottom

[BeataK]

Hi!
I have a 2 column layout on a web page.
In IE:
if a word is to long in the right column all the content in that column drops to the bottom and the container column gets wider.

In Firefox/Netscape: The long word flows over the column borders.

Does anyone have a solution for me or can tell me what I should look into?

Parts of my css:

#container { 
 margin: 10px auto; 
 padding: 0px; 
 width: 650px; 
} 
#mainbody { 
 clear: both; 
 margin: 0px; 
 padding: 0px; 
} 
#maincontent { 
 float: left; 
 margin: 0px; 
 padding: 5px 10px 10px 10px; 
 width: 440px; 
} 
#rightbody { 
 height: 100%; 
 margin: 0px 0px 0px 450px; 
 padding: 2px 10px 10px 0px; 
} 
#rightcolumn { 
 margin: 0px 0px 25px 10px; 
 padding: 5px; 
} 

The HTML:

<div id="container"> 
<div id="mainbody"> 
 <div id="maincontent"> 
 This is the left column. 
 </div> 
 <div id="rightbody"> 
 <div id="rightcolumn"> 
 This is the right column. 
 </div> 
 </div> 
</div> 

But I'm not sure the error is in that part of the code :-/

[edited by: SuzyUK at 11:57 pm (utc) on Aug. 5, 2004]
[edit reason] please no URLS see TOS #13 [webmasterworld.com] [/edit]

[SuzyUK]

Hi BeataK - Welcome to WebmasterWorld

yes the problem is evident in the code you've posted.

The problem is IE's disrespect of the "overflow" property, instead of overflowing the content outside it's parent it's stretching the parent to fit.. Long words (urls etc..) are a common cause of floated layouts breaking..

I'm not sure of the best solution for you, but I found this..

word-wrap:break-word;

It's MS proprietary only so probably won't validate, I don't have any experience of it but in a quick test (added to #rightcolumn) it solved the the problem in IE5.5/6 (not 5.0)

Suzy

[BeataK]

Thank you Suzy, I was aware of the IE-specific solution but I really need the code to validate so I can't use word-wrap :-(

[jetboy_70]

Use:

<!--[if IE]>
<style type="text/css">
@import "ie-specific-css.css";
</style>
<![endif]-->

after you import your main css, and just put:

#rightcolumn {
word-wrap: break-word;
}

in ie-specific-css.css.

The validator will skip over the IE conditional comment, so your page will validate. The style will only be applied to IE5+.

[BeataK]

jetboy_70: Thank you so much! I had no idea that you could use <!--[if IE]> . You saved my day!