Cheating the Float Model

it's just...one...pixel!

[createErrorMsg]

Does anyone know of a way to inch a right floated box over the right edge of it's containing box?

I am assuming that this is not possible (if it can't contain it, why is it called a 'containing box') but if it WERE possible, it sure would make my life easier.

I need the containing box to have a right border, but I only want the border showing below the floated box. For most browsers, I can use a second box in the container and give the border to it--the float then overlaps that box and hides the border--but Ie5 for Mac has a funky float model that doesn't allow the contents of a box adjacent to a float to wrap beneath it(it does allow non-boxed elements to do so, however). The site is likely to have a fair number of Mac users, so ignoring Mac's float behavior isn't an option.

If you know of a way to trick the floated box into creeping just ONE TEENSY TINY PIXEL out of it's container, please please please let me know.

Thanks!

[Span]

Try a negative right margin on the float.

[createErrorMsg]

Thanks, Span.
Sadly, negative margins only crams the float up underneath the unwanted border. :(

[Span]

Strange.
On my Mac, in 4 different browsers, the float hides the border of the containing div.

<div style="width:500px;border:1px solid blue;">
<div style="float:right;width:200px;margin-right:-15px;background:green;border:1px solid red;">
<p>Integer libero sem...</p>
</div>
<p>Fusce eget ante eget pede consectetuer placerat.</p>
</div>

[createErrorMsg]

Sorry, I should've clarified. On Win browsers (tested Firefox and IE5,6) the negative margin pushes the float under the border and out of sight. I didn't test it on a Mac yet, although since it doesn't work on Win I'm tempted to give up (imagine all the hacking it would take to structure MAc to have no extra containers with the negmargin and WIN to not have the negative margin but have the extra boxes..Oi!).

I'll test it on Mac as soon as I can. Maybe browser specific stylesheets and server side sniffing are the only way...(please god no)

Thanks, Span. I appreciate the help.

[Rambo Tribble]

As I recall, IE is known to have a 1px edge problem when using percentages for dimensions.

[DrDoc]

Give both a relative position, and the child a higher z-index ;)

Example:

<div style="background:red; 
    border:5px solid blue; 
    width:100px; 
    height:100px; 
    position:relative; 
    z-index:1"> 
  <div style="width:20px; 
       height:20px; 
       background:white; 
       float:left; 
       position:relative; 
       z-index:2; 
       margin-left:-5px;"></div> 
</div>

[createErrorMsg]

A-Ha!

DrDoc, you did it. Using z-index I've got it working in IE5 for Win and Mac. I'll test on IE6(win), Firefox, etc when I get home to a computer that has them. But for now the stuff is wrapping, the border is gone, and ... what's that? ... why, yes, it's a bird on the windowsill twittering in the sunlight...

Thanks a million.