div "covering" other areas in FF

[dlinder]

I'm having problems with a div that I move using position:relative. For some reason it "blocks" areas straight over it on the page, diabling mouseover there, and making buttons unclickable. The problems only appear vertically aligned to the div in question.

http://www.virtualfeed.com/index.php

The div in question is the "Hjälp pussa..."-comment box. It's tagged #kommentar.

Here is the css-file:

http://www.virtualfeed.com/mall.css

Rembember, only in FF. IE is fine.

Any help greatly appreciated. Thanks!

[Lchad]

Did you try adding clear: both;
to the div

Code: Select all

#kommentar {
position:relative;
top:-190px;
left:88px;
width:190px;
height:80px;
clear: both;
}

[dlinder]

That worked wonderfully, thanks!

Do you know why it was needed?

[Lchad]

I actually do know why it worked. Shocking!

Your div above is floated. The clear prevents the div below it from wrapping around the div above. The cleared element drops below the bottom of the floated element.
Since that element above is floated left, you probably could have used
clear: left; (clear left prevents a following element from wrapping around a left floated element.)(Clear right prevents an element from wrapping around a right floated element)
But in my limited experience, I don't take a chance, I just clear both!

Glad it worked!

[Ryan Fait]

Haha, left and right for clears are very useful once in a while, but I usually do a clear: both; even if I'm only clearing one side.

[dlinder]

Ok, I understand. Thanks for all help and explanation!