Fixed designs specify CSS box model properties in pixels (e.g.
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.
- 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
- You choose 1% for the
- 14.285714285714 - 4 - 2 = 8.285714285714% for the
- 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.
- You built the perfect layout.
- It's inside a
divwhich 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.
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.
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 use the
:nth-child()selector. This selector supports formulas and is very powerful.
- To see what happens if you don't use
sectionelement and manually remove the
<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.
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
In Class 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
articleelement and then fix the width of the
divso 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:leftproperty 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.