Position Absolute + float Right

joey3fingers

02-12-2009, 07:47 PM

In the past it seems i have run into this issue a couple times. Here is the run down.

I would like to have a cell when hover over it a layer (information box [div]) appears a little to the right and a little above the cell, the cells are not always the same size and the information box that hovers up is also not always the same size.

In ie 7 there is no issue I can float and position the cell as I please, in Firefox I can only float the cell right if I use position "relative" this however creates a issue in every browser where the width of the cell is relative to the width of the information box.

Below is a simple example of the issue, I broke it down for you all. Test it in IE7 and Firefox3

<body style="margin:50px;">

<table>
<tr valign="top">
<td style="height:300px; width:300px; background:#00FF00;">
<div style="background:#FF0000; float:right; position: absolute; width:450px; margin-top:-30px;">float right + absolute</div>
<div style="width:150px; height:30px; background:#CCFF00; float:left;">container div</div>
<br />
<br />
<br />
Full Cell</td>
<td style="height:300px; width:300px; background:#00FF00;">
<div style="background:#FF0000; float:right; position: relative; width:450px;">float right + relative</div>
<div style="width:150px; height:30px; background:#CCFF00; float:left;">container div</div>
<br />
<br />
<br />
Full Cell</td>
</tr>
</table>

</body>

Any help is appreciated, thanks
Joe

joey3fingers

02-12-2009, 08:54 PM

i have removed the float right and i still have the desired effect in ie 7, firefox is still messed up... :eek:

<body style="margin:50px;">

<table>
<tr valign="top">
<td style="height:150px; background:#00FF00;">
<div style="background:#FF0000; position:absolute; width:450px; margin-top:-30px;">absolute</div>
<a href="#" style="width:150px; height:30px; background:#CCFF00; float:left;">container div</a></td>
<td style="height:300px; background:#00FF00;">
<div style="background:#FF0000; float:right; position: relative; width:450px;">float right + relative</div>
<a href="#" style="width:150px; height:30px; background:#CCFF00; float:left;">container div</a></td>

</tr>
</table>

</body>

drhowarddrfine

02-12-2009, 09:48 PM

As always, Firefox is right in your first instance. Positioning absolute removes the element from the normal flow. Floating it will have no effect since ap negates that. Relative positioning lets you position it relative to where it was floated. IE, as always, gets it wrong.

IE has a lot of problems with floats. You should never refer to IE for how things should work.

joey3fingers

02-12-2009, 10:18 PM

thanks for the advice, but im looking for a solution.

here is the live example so you guys know what im talking about, because idont think you do at the moment.

http://betonbabes.com/nfl-lines/parlay-error.htm