I really hope that somebody can help me because I am out of ideas and cannot
find a solution... (I don't mind starting from scratch either)
I have set up the page to have a box floated in the middle of the browser
window (like ALA)
There is an image that is floated in this box on the left hand side and is
most of the height of the box.
Next to the image are two floated boxes (set with margin: 0 23px 0 23px for
the first box and 0 for the second) that are about 2/3s of the height of the
image and all three floated divs align along their top edges - i.e. the
image and the two boxes align along the top. No problems with any of this.
Beneath the two floated boxes is a div for another box (position: relative;
margin: 0; left: 23px;) which is supposed to sit beneath the two afore
mentioned floating boxes and next to the bottom portion of the floated
In IE and mozilla this lower box appears where it should, i.e. 23 pixels to
the right of the original floated image beneath the two floated boxes all
In opera is where there are problems. The relatively positioned box still
appears beneath the 2 floated boxes but sits on top of the bottom portion of
the floated image 23 pixels from the left edge of the main box, i.e. it is
ignoring the part that the floated image plays in the page because opera
behaves well and floated elements are removed from the flow of the page.
if i set left for the relatively positioned box to a value compensating for
the floated image then it will render ok in opera and IE - but is now that
many pixels to the right in mozilla
ok the page is www.schoolaid.org.uk <http://www.schoolaid.org.uk/> if you
open it in mozilla or IE you will see how I want it to appear.
and the CSS is www.schoolaid.org.uk
i've tried quite a few things to correct this but i'm shooting in the dark
really and nothing has worked so i'm hoping one of you knows how to fix this
or how to go about it correctly (and that you can understand my waffling
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/