CHAPTER 17 ■ LAYOUTSOpposing Floats
Problem You want two elements to be positioned at opposite sides of a container. You want a
browser to shrinkwrap each one to fit its content. You want to put minimum and maximum
limits on the width of each one.
Solution You can assign float:left to one sibling element and float:right to the next. This moves
both elements to opposite sides of their parent. It doesn’t matter which element comes first
in document order. This pattern applies only to pairs of adjacent sibling elements.
The parent of the opposing floats can be floated or nonfloated. You can follow the floats
with a float divider to ensure that no subsequent content comes in between the floats and to
ensure that the parent expands vertically to encompass the opposing floats. If you want to
float multiple pairs of opposing floats within the same parent, you can insert a float divider
between each pair to prevent them from stacking next to each other.
You can assign min-width and max-width to each float to set its minimum width and
maximum width. You can assign margin-left to the left float and margin-right to the right
float to adjust their positions.
Pattern^
HTML
CSS #ID1 { float:left; min-width:VALUE; max-width:VALUE;
margin-left:±VALUE; }
#ID2 { float:right; min-width:VALUE; max-width:VALUE;
margin-right:±VALUE; }
.float-divider { clear:both; display:block;
height:1px; font-size:1px; line-height:1px; }
Location This pattern works anywhere because you can float inline or block elements.
Limitations Internet Explorer 6 doesn’t implement min-width and max-width, but Internet Explorer 7
and higher versions do. These properties aren’t essential to this design.
Tips When floating text to the right, it’s often better to omit min-width. This allows a browser to
shrinkwrap the float to the minimum width of the text, which keeps the text aligned to the
right side of the parent. If you want multiple lines of text to be aligned to the right, you can
assign text-align:right to the float.
Related to Fluid Layout, Float Divider; Floated Box (Chapter 4); Margin (Chapter 6); Float and Clear
(Chapter 7); Offset Float (Chapter 8); Blocked (Chapter 11)