Fluid Design Basics

Sam Scott, Jan 2016

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.

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:

  • You want 7 columns to fit into 100% of the available space.
  • 100 / 7 = 14.285714285714% for the total width.
  • You choose 2% for the margin property
  • You choose 1% for the padding property
  • 14.285714285714 - 4 - 2 = 8.285714285714% for the width property.
  • To see this in action, go here.

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:

  • You built the perfect layout.
    • It's inside a div which is 768px wide.
    • One element has 10px padding, 13px right margin and 233px width.
  • Divide each px measurement by the available width and multply by 100 to get the percentages.
    • 10 / 768 * 100 = 1.30208333333% padding.
    • 13 / 768 * 100 = 1.69270833333% margins.
    • 233 / 768 * 100 = 30.338541667% width.
  • To see this in action, go here and here.

Notes and Tips

Percent = Percentage of the available width.

Keep all the decimal places.

  • The browser can handle it and you will get more accurate layouts.

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

  • You need this if your sections have different heights (as they do in this page).
  • One way to do this is to wrap every row in a <div> element, then use the ::after selector to insert a pseudo-element at the end of the row with clear:left.
  • To see what happens if you don't use clear:left inspect a div element with class="row" on this page and manually remove the clear:left property. You might have to zoom out to see the difference in how the columns are laid out (look at the "More Information" section).
  • You can read more about this technique here.

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.

  • Now you can specify borders and padding in pixels and specify widths in percentages
  • Now only the width and margin properties have to add to 100%

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.

You can also use the * selector to put the box-sizing:border-box property on every element, as suggested by w3schools.

More Information

A flexible image with a fixed-width border.

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.