All to Clear.

Is this a problem with IE's box model?

[mep00]

<div style="width : 20%; float : left;">Lines of stuff</div>
<div style="margin-left : 25%;">
 <form>
 <div style="clear : left;">More stuff</div>
 </form>
</div>

Note: This is a scaled down model.

It seems the "More stuff" is clearing the floated <div>. Is this what should be happening, or is IE getting it wrong?

Either way, any suggested corrections?

[IeuanJ]

Well, it's not just IE, Opera does it too, I think this is what is meant to happen as clear:left should put the div clear of all floated elements to the left of itself. Because when you float an element it in effect leaves the normal flow of code, there is no idea of where in the hierarchy of div's it lies so even though you know you want to clear it below only stuff in the main content div, the browser doesnt know that.

Dont know if there anty ways around this though.

[mep00]

Dont know if there anty ways around this though.

I was afraid of that. :(

Absolue positioning would probibly work, but I don't think the support is great there.

Two alternitives I thought of, but haven't tried yet, is either floating and clearing right, or using a span:

<div><label>label</lable><span><input /></span></div>

The only real problem with the <span> is it adds bloat, which I would prefer to avoid.