Float prolems with elements in a relatively positioned div

[RichB]

I'm having some problems with the vertical alignment of elements that have been right floated - they don't line vertically with the line they've been floated right of.

What seems to be happening is that these elements are not inheriting the 'top' value of the parent div (making them appear the same distance further up). The parent div is relatively positioned, and when i make it absolute, the alignment of the floated elements is fine (though everything else breaks!)

I've only noticed this with IE5/6win, and it displays how i wanted it to in Mozilla

nb I only need it to display correctly in IE5/6win, though if Mozilla works that'd be a bonus (it's not a public site)

The workarounds i've tried so far:

1) Adding a top margin the same as the top value of the parent div to the floated elements - Failed due to causing the floated elements to float past each other.

2) Workaround 1) plus 'clear: both' - Failed due to causing the left margin of the parent div to disappear

The CSS:

#ParentDiv {
margin-left: 220px;
margin-right: 220px;
position: relative;
border: 1px solid #D3D3D3;
top: 108px;
voice-family: "\"}\"";
voice-family:inherit;
top: 110px;
}

.FloatedElements {
float : right;
font-weight : normal;
}

Any suggestions?

Richard

[photon]

RichB--

I'm not able to check this at the moment, but you might try adding

position:relative;

to your floated elements as well as the parent div.

HTH

[RichB]

Brilliant - that's done the trick.

Thanks photon!

Richard

[photon]

You're welcome!

And by the way, Welcome to WebmasterWorld [webmasterworld.com]!