Fluid Design Basics

Sam Scott, October 2014

Fixed Designs

Fixed designs specify CSS box model properties in pixels (e.g. width:700px).

Fixed designs do not adapt to the browser size.

Fixed designs may be too big for some browsers.

Fixed designs may be too small for other browsers.

Fixed designs are not responsive.

Fluid (Flexible) Designs

Fluid designs specify all horizontal CSS box model properties (except border) in percentages (e.g. width:80%; padding-right:10%; padding-left:10%).

Fluid designs adapt to the size of the browser.

Fluid designs can grow and shrink smoothly as the browser resizes.

Fluid grids and fluid images are two of the main features of Responsive Web Design.

Fluid designs can be tricky to get just right.

This page is an example of a two-column fluid grid.

Option 1: Think In Columns

In this approach to fluid design, you think in columns and work out the percentages ahead of time for each column.

For Example:

Option 2: Convert Fixed to Flexible

In this approach to fluid design, you first build the perfect fixed-width design, then convert it to flexible percentages.

For Example:

Technical Notes

Percent = Percentage of the available width.

Keep all the decimal places.

Use a clear:left property on some elements in order to create the effect of rows.

Or use <div> elements to wrap up each row of elements and get a similar effect.

Why Not Just Use a Table?

Question: Why bother with all this floating and clearing? If we just used a table we could get the grid we wanted without all that fuss.

Answer: That would work just fine if you always want your page to be displayed in two columns.

But if you want it to be truly responsive and change the number of columns on different devices, you can't use a table.

A flexible image with a fixed-width border.

The Problem of Borders

Problem: Border widths can only be specified in pixels, not percentages.

But if you mix pixel and percentage widths, bad things will happen.

Solution 1: Don't use borders

Solution 2: Use box-sizing: border-box;. This is a new CSS3 property that forces the width property to include borders and padding.

To see how this works, use Chrome's developer tools to set the border for the image on this page to be 50px wide, then remove the box-sizing rule.

More Information

In Class Exercises

  1. Download the Seven Columns example.
    1. Change it to a 3, 4 and 5 column layout without changing any margins or padding.
    2. Add 5 pixel black borders to each element. Now fix it so that it is once again a perfect 7 column layout.
  2. Download the Fixed Layout example.
    1. Add 50px padding to the article element and then fix the width of the div so that everything fits horizontally.
    2. Now convert this new layout to a flexible layout.

Even More Exercises

Download the Sagan Ipsum example.

  1. Arrange the main article into a flexible grid with 4 columns with a sizeable margin on each side of the article. Use the clear:left property to create the effect of rows.
  2. Fix the image so that it fits properly into the available width.
  3. Arrange the main article into a flexible grid with 3 columns (with a sizeable margin) but only two sections per column. In odd rows the second column should be double width while in even rows the first column should be double width.
  4. Convert one of your solutions to the above so that the header text is left justified to the same level as the article and the footer text is right justified to the same level as the article.