Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Float Divider

Problem You want to put a divider between two sets of floats or between floats and content—much
like how you would put a line break or a horizontal rule in the normal flow. You want to
control how much space the divider inserts, and you want to style it with borders and
background.

Solution You can add clear:both to the Horizontal Rule design pattern, which is an empty division
styled with width, height, and margin to control how much space it inserts. You can use
font-size:1px and line-height:1px to ensure that Internet Explorer 6 doesn’t expand its
height beyond the height you specify. You can also use border and/or background to style
the divider’s line.
Instead of inserting a float divider, you may want to add a unique ID to an existing element
and style it with clear:both.

Pattern^

HTML

CSS .float-divider { clear:both; font-size:1px; line-height:1px;
height:+VALUE; width:+VALUE;
margin-left:±VALUE; margin-right:±VALUE;
margin-top:+VALUE; margin-bottom:+VALUE;
border-top:WIDTH STYLE COLOR;
border-bottom:WIDTH STYLE COLOR;
background-color:COLOR;
background-image:url("FILE.EXT");
background-repeat:REPEAT_OPTIONS; }

Location This pattern works anywhere a division can be located.

Advantages A float divider is modular and self-documenting. Its borders, background, and margins are
self-contained, which simplifies the stylesheet and avoids styles being overridden by the
cascade order. You can quickly and easily reposition a float divider between any two
elements to change the layout.
When a block is collapsed because all its children are floated, you can use a float divider to
expand the block to encompass its floated children. This is an essential technique explored
in the Fluid Layout design pattern.

Tip A float divider can be an inline element as long as you display it as a block (display:block).

Related to Fluid Layout; Floated Box (Chapter 4); Margin, Border, Padding, Background (Chapter 6);
Float and Clear (Chapter 7); Spacing, Inline Spacer, Linebreak, Inline Horizontal Rule
(Chapter 11); Horizontal Rule, Block Spacer (Chapter 13)