7 replies [Last post]
Beata
Beata's picture
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-04
Posts: 4
Points: 0

Hi!
I have a 2 column layout on a web page, for a demo see: http://www.ludd.ltu.se/~bea/InterNIT/.
In IE:
if a word is to long (in this case Distansöverbryggande) in the right column all the content in that column drops to the bottom and the column gets wider but the BG-colour doesn't follow. If it doesn't happen for you test View->Text size->Largest

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

You can find the css at http://www.ludd.ltu.se/~bea/InterNIT/style/internit_style.css

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

j-ra
Offline
Regular
Topeka, KS
Last seen: 16 years 17 weeks ago
Topeka, KS
Joined: 2004-08-02
Posts: 14
Points: 0

Problem with column layout - content drops to the bottom

Hey Beata,

When I developed my columns I came across a similar problem. But, after I redesigned all of the html/css, I ended up using a technique similar to this one.

.leftcolumn
{	
	width:		400px;		
	float:		left;
}

.rightcolumn
{
	margin-left:	402px;
}

The key to this style is the margin-left: attribute on the right column.

Just an idear, HTH.

bfaust
Offline
newbie
Manassas, VA
Last seen: 16 years 20 weeks ago
Manassas, VA
Joined: 2004-07-12
Posts: 5
Points: 0

Problem with column layout - content drops to the bottom

I'm not seeing it in IE6, but I think it may be a matter of width. Like the previous post suggests, you could simply apply a large left margin so that it could remain somewhat fluid when content needs to stretch the column among browsers.

Looks like you may have already fixed it though.

Beata
Beata's picture
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-04
Posts: 4
Points: 0

Problem with column layout - content drops to the bottom

bfaust wrote:
I'm not seeing it in IE6, but I think it may be a matter of width. Like the previous post suggests, you could simply apply a large left margin so that it could remain somewhat fluid when content needs to stretch the column among browsers.
Looks like you may have already fixed it though.

I haven't fixed it and it shold not be a matter of width because the container div have a fixed width. don't you get the error when you set the text size to largest? (The error is only shown on the first page). The right column have a 10 px lager left-margin then the width of the left column. There must be something else that makes the container div larger (687px) then the stated 650 px

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>

j-ra
Offline
Regular
Topeka, KS
Last seen: 16 years 17 weeks ago
Topeka, KS
Joined: 2004-08-02
Posts: 14
Points: 0

Problem with column layout - content drops to the bottom

have you tried addding a margin-left: and a width: to your #rightbody?

#rightbody
{
margin-left: 440px;
width: 210px;
}

Beata
Beata's picture
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-04
Posts: 4
Points: 0

Problem with column layout - content drops to the bottom

j-ra wrote:
have you tried addding a margin-left: and a width: to your #rightbody?

#rightbody
{
margin-left: 440px;
width: 210px;
}

I have tried adding a width and it doesn't help and there is already a left-margin of 450 in the code for #rightbody:

	margin: 0px 0px 0px 450px;

j-ra
Offline
Regular
Topeka, KS
Last seen: 16 years 17 weeks ago
Topeka, KS
Joined: 2004-08-02
Posts: 14
Points: 0

Problem with column layout - content drops to the bottom

awesome, i didn't see that.

i'll spend some time on it during lunch.

I had this exact problem a while back, and I could of sworn that when i added a left margin it fixed it.

Beata
Beata's picture
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-04
Posts: 4
Points: 0

Problem with column layout - content drops to the bottom

j-ra wrote:
awesome, i didn't see that.

i'll spend some time on it during lunch.

I had this exact problem a while back, and I could of sworn that when i added a left margin it fixed it.

Thank you.

I have added borders to the different divs to make it easier for you to see them on http://www.ludd.ltu.se/~bea/InterNIT/test.html
container: blue
mainbody: purple
maincontent: yellow
rightbody: red
rightcolumn: green