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)
CODE
<div id="wrapper">
<div id="right">STUFF</div>
<div id="left">Main PAGE</div
</div>
<div id="right">STUFF</div>
<div id="left">Main PAGE</div
</div>
CODE
#wrapper {
width: 900px;
}
#right {
float: right;
width: 200px;
}
#left {
width: 700px;
}
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.