I'm currently working on a site with a left-hand side bar menu. The problem comes when I try to insert another menu on the opposite side of the page at the same level as the left-hand menu.
The site is http://parisvertical.hitdesign.fr
I first tried a floating right-hand div. It worked in everything but IE7 where it pushed it down beneath the left-hand one.
I then tried a position:absolute solution:
<div style="position: absolute; left: 719px; width: 61px; height: 34px; top: 9px;">
which again, worked in everything I tried apart from IE7. You can see the problem in the attached screenshot : it renders way beneath where it should be.
All help much appreciated!
Thanks very much, I've tried floating inline but it hasn't made a difference.
The CSS is :
<div style="position:absolute; display:inline; top:425px; left:719px; width: 276; height: 23;"><a id="estimation" href="#"></a></div>
This is written within the left-hand side bar div (position:relative).
it sounds like a classic hasLayout bug, try setting some style properties that force hasLayout such as zoom:1. Or if this doesn't work, I find setting display:inline-block often fixes issues such as this
With floats instead of having a left floated menu and a right-floated menu, have a left floated menu, then float the middle content section left as well, then float the right hand column left. The width on the center column can be used to push the right column into it's proper place, then you have you header and footer above and below respectively
Position Absolute takes its placement from the nearest position:relative parent element. maybe the dimensions you are setting are unsuitable? try adding borders to the elements so you can see what's happening. is the left hand side bar in the proper place?
You have set width on floated elements. This triggers bugs in Internet Explorer, without studying your CSS in detail it's hard to be precise, but a good rule to follow is that if an element has a set width and also is floated then declare display:inline; for it as well.
generally that makes the float bugs in IE go away.
something else that might be an issue is that the elements are empty - and I recall IE not behaving properly in that instance.
try adding a
inside the empty link elements and see if that helps.