centering of right-aligned float

negative margins trickery...

chaotic test page
#17
13.apr.2006

...a right-aligned float in a centered container, will overflow to the left on narrow windows if the width, min-width and max-width are set right, and the float is given a negative back-side margin...

I'm sorry, but some of this text will disappear beyond the left side of browser-windows made much narrower than 800px. That's what the CSS say, so not much I can do about it.

I have however made this container center pretty nicely on browser-windows wider than 1000px, so it is not all lost.

IE6 and older will need some help to mimic min/max width properly.

CSS & results in tested browsers

#independent{
width: 100%;
max-width: 1000px; 
min-width: 200px; 
margin: 0 auto; 
min-height: 100px;
}

#independent div {
float: right; 
width: 100%; 
max-width: 1000px; 
min-width: 800px; 
min-height: 100px; 
margin-left: -600px; 
background: #eee;}

Notes:

some notes here.

tested browsers:

Opera:
win2K: 8.5, 9tp2
= fine
FF:
win2K: 1.5.0.1
= fine
Safari:
Mac OS-X: 1.2.4
= fine
IE:
win2K: 6.0
= in need of help with min/max - otherwise fine.
winXP: 7 (20.mar.)
= fine