Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Floating Section

Problem You want sections to be rendered in columns instead of rows. You want a browser to reflow
sections automatically into rows to fit small displays. You also want sections to be sized
proportionally to the width of their parent while controlling spacing between sections. And
you want to set minimum and maximum heights and widths to ensure that a browser
doesn’t automatically size sections too small or too large.

Solution You can use the Section design pattern to create a section, and you can float it to the left to
render it as a column instead of a row. You can assign a unique ID to it so you can select it,
style it, and target it with hyperlinks.
You can embed an outside-in box within each float and style its margins, borders, padding,
and background instead of the float’s. This makes it easy and reliable to size floats
proportional to their container.
You can assign min-width to a section to prevent it from shrinking too small. You can assign
max-width to a section to prevent it from growing too wide. You can also assign min-height
to the outside-in box to ensure that floats with less content have the same minimum height
as those with more content.

Pattern^

HTML

CSS #SECTION_ID { float:left; width:PERCENT;
min-width:VALUE; max-width:VALUE; }
#SECTION_ID .oi { min-height:+VALUE;
margin:+VALUE; border:WIDTH STYLE COLOR;
padding:+VALUE; background:STYLES; }

Location This pattern works anywhere sections can be used.

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.

Example In the example, the first float’s width is 25% of its container’s width, and the second float’s is
75%. Notice how the percentages add up to 100%. Without the outside-in box, you would
have to play around with percentages to find values that compensate for margins, borders,
and padding around floats.
Notice how the floats in the example have no margin, border, padding, or background.
What you see is the border and background of the outside-in box inside each float. For
example, the outside-in box in the second float has an 80-pixel left margin, which creates
the illusion of space between the floats when it’s actually inside the second float. It also has
an 80-pixel left padding, which indents the content without changing the float’s outer
width.

Related to Outside-in Box, Fluid Layout; Floated Box (Chapter 4); Width (Chapter 5); Margin, Border,
Padding, Background (Chapter 6); Float and Clear (Chapter 7); Section (Chapter 13)