Floats are different across browsers? (example) 2

[donishere]

http://www.osaa.org/test/

http://www.osaa.org/test/osaa2006.css

IE is showing the "LEFTSIDE" and "RIGHTSIDE" as columns that are the entire height of the "middle" column.

Firefox is showing the middle column "wrap" around the "LEFTSIDE" and "RIGHTSIDE" columns.

Any ideas why?

Thanks.

 

[j4606]

It's acctually not wrapping around it's getting clipped.
try this

#leftside {
	FLOAT: left; WIDTH: 170px; HEIGHT: 100%;
	border:solid;
	border-color:red;
	
}
#rightside {
	FLOAT: right; WIDTH: 170px; HEIGHT: 100%
}
#middle {
	FLOAT: left;
	border:solid;
}

It will help you see what is going on. As for fixing that there are many ways to go about it. You can specify hieght for example.

#leftside {
	FLOAT: left; WIDTH: 170px; HEIGHT: 100%;
	border:solid;
	border-color:red;
	height:100px;
	
}
#rightside {
	FLOAT: right; WIDTH: 170px; HEIGHT: 100%
}
#middle {
	width:500px;
	FLOAT: left;
	border:solid;
}

I would look further into it but i gotta drive home now :<

I don't know the answer but my good friend Google does.

 

[j4606]

opps what i meant was make the widths fixed so it doesn't get clipped. nvm the height it's already in there.

#leftside {
	FLOAT: left; WIDTH: 170px; HEIGHT: 100%;
	border:solid;
	border-color:red;
	
}
#rightside {
	FLOAT: right; WIDTH: 170px; HEIGHT: 100%
}
#middle {
	width:500px;
	FLOAT: left;
	border:solid;
}

sorry about that...long day.

I don't know the answer but my good friend Google does.

 

[donishere]

Thanks, j4606!

Now another problem...

In IE, the last 3 characters of whatever is in the "rightside" div is being duplicated directly the "rightside" div.

Confusing...

Why?

 

[j4606]

Thats kinda wierd. Might be hard to find that one but looking at it right now. If your on you can try by starting to validate your html and css.

http://validator.w3.org/check

http://www.w3.org/Style/CSS/

I don't know the answer but my good friend Google does.

 

[j4606]

line 343 in your html

<DIV id=rightside>RIGHIasDE[COLOR=red]</DIV>[/color]<!-- "rightside" -->[COLOR=red]</DIV>[/color]<!-- "maincontainer" -->

thats something that would have been fixed by having valid html. Seems like an extra </div> tag.

I don't know the answer but my good friend Google does.

 

[Vragabond]

You just have to love IE I guess. Read up on this:

http://www.positioniseverything.net/explorer/dup-characters.html

 

[j4606]

good read. I would of never figured that out. Something was wrong with that line cause when I removed one of the </div>'s it magically worked. Thanks for the info. Glad to know it wasn't a div but a comment.

I don't know the answer but my good friend Google does.