3 replies to this topic

[ReZTeR]

OK here is my problem.

I'm working on a new site and I've came across a problem with firefox (it loads how I want it in IE), I am a personal fan of firefox but can't understand why this is happening.

OK... so basically this is what I have:

(Note... this isnt my full code just the part im having a problem with lol)

<div id="wrapper">
  <div id="right">STUFF</div>
  <div id="left">Main PAGE</div
</div>

#wrapper {
width: 900px;
}

#right {
float: right;
width: 200px;
}

#left {
width: 700px;
}

OK this works just fine...... but if the "right" box ends up being longer than the "left" one (which it does at certain points) then the wrapper box sticks to the height of the "left" box and the "right" box overflows. This only happens in Firefox and I'm wondering if there's any solutions. Maybe even if there's some advise on how I can make this work better?

Oh.. and i have tried adding an [overflow: inherit] thing to the wrapper and that doesn't fix it.

Edited by ReZTeR, 31 May 2009 - 05:18 PM.

[rc69]

My usual fix:

<div id="wrapper">
	<div id="right">STUFF</div>
	<div id="left">Main PAGE</div>

	<div style="clear:both;"></div>
</div>

Which version of IE are you running? The "problem" should occur in IE as well.

[ReZTeR]

Thanks a lot dude, seems so simple now that I know lol.

[derek.sullivan]

I know sometimes for me if I don't place a specific <!DOCTYPE>, it'll work for one browser rather than the other. Make sure you include a <!DOCTYPE> at the header of your html file, see if it helps any.

http://www.w3.org/QA...d-dtd-list.html