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.
- It's inside a
- 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.
- This means the width of the content section of the containing element.
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 withclear:left
. - To see what happens if you don't use
clear:left
inspect adiv
element withclass="row"
on this page and manually remove theclear: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

Exercises
- Download the Seven Columns example.
- Change it to a 3, 4 and 5 column layout without changing any margins or padding.
- Add 5 pixel black borders to each element. Now fix it so that it is once again a perfect 7 column layout.
- Download the Fixed Layout example.
- Add 50px padding to the
article
element and then fix the width of thediv
so that everything fits horizontally. - Now convert this new layout to a flexible layout.
- Add 50px padding to the
Even More Exercises
Download the Sagan Ipsum example.
- 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. - Fix the image so that it fits properly into the available width.
- 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.
- 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.