red dashed border is base-line on the left side, and all bordered floats are 300px wide and are floated left so they line up against the base-line.
The yellow background on a surrounding, non-dimensioned, float, shows where the margin-edges on each of the bordered floats are.
#1:Float with no margins.
float #1.
all margins are zero.
#2:Float with positive margins on all sides.
IE6, and IE7, fails to apply margin-bottom on a float within a float.
It's a genuine IE bug.
float #2.
margin: 10px 10px 10px 10px
#3:Float with negative margins on all sides.
float #3.
margin: -10px -10px -10px -10px
#4:Float with negative margins only on the backsides - that's right and bottom for a left-float.
float #4.
margin: 0 -20px -10px 0
#5:Float with negative margins only on the frontsides - that's left and top for a left-float.
float #5.
margin: -10px 0 0 -20px
#6:Float with negative (front) left-margin, positive (front) top-margin and zero backsidemargins.
float #6.
margin: 10px 0 0 -70px
#7:Float with positive (front) left-margin, positive (front) top-margin and zero backsidemargins.
float #7.
margin: 10px 0 0 70px
#8:Float with positive (front) left-margin, positive (front) top-margin, negative (back)
right-margin and negative (back) bottom-margin.
As can be seen from the missing yellow background on the float's surrounding, this float has so large negative
backside margins that it does not take up any space.
I call this a “removed float”.
float #8.
margin: 10px -300px -100px 70px
– created: 15.Mar.2007
– updated: 11.Aug.2007
created by: Georg Sørtun – www.gunlaug.no
For more on the subject, read the on-site article about positioned and
removed floats.