When Responsive Web Design was introduced to the developer community, it brought on a significant change in how we think about our web sites as well as how we develop our projects. But even before before adding responsive web techniques, it’s important to create a fluid layout to make the transitions between different screen sizes easier to manage and require less breakpoints for making changes.

Fixed vs Fluid layouts

Fixed

Fixed layouts use exact pixel widths which means that the size of the page components will be the same for all resolutions.

For example, there is usually some kind of “wrapper” or “container” used to group related content. Then a width is applied to keep the content from expanding across the entire page.

HTML

CSS

<section class="wrapper">
content goes here
</section>

.wrapper {
width: 800px;
}

Optionally, a margin is applied to automatically center align the block of content.

.wrapper {
width: 800px;
margin: 0 auto;
}

But, if the browser window is smaller than the width of the layout, a horizontal scrollbar will show and the elements itself won’t change in width.

Fluid

Most of the page components in a fluid page layout adjust to the user’s screen size by using percentage widths rather than fixed pixel widths. Fluid layouts are also sometimes referred to as a liquid layout. To make the element more flexible, the previous example could be revised to use a percentage width instead.

.wrapper {
width: 80%;
margin: 0 auto;
}

No matter the size of the browser window, the wrapper is now 80% of its container, the body element/browser viewport in this example.

Here’s a comparison of a fixed width vs percentage width content wrapper. Notice that when using a percentage for the width, the wrapper element remains at an 80% width of its current container size and the content also stays within wrapper.

fixed width

fluid/percentage width

This technique is great for small resolutions but what happens when the resolution of the screen goes wider than your desired width?

fixed width

fluid/percentage width

Remember, the percentage width is relative to the size of its container so when the resolution is bigger, the desired wrapper width is now too wide!

max-width

Use the CSS property max-width to create boundaries for a fluid page.

.wrapper {
max-width: 800px;
width: 80%;
margin: 0 auto;
}

By setting a percentage width and a fixed pixel max-width, the content wrapper will always be relative to the screen size, until it reaches the maximum size, 800px in this example, to keep the content wrapper from extending beyond that.

If the image is bigger than its container, it will “spill out” of its container. Setting the image width to 100% will change that! This will make the images 100% of their container.

.column img {
width: 100%
}

Better yet, make the column width a percentage as well and both the columns and images will now be fluid. Refer to the CodePen example below to look at the final CSS and try changing the browser window size to see how the columns and images scale together. See the Pen Fluid Columns & Images by christinatruong (@christinatruong) on CodePen.

Before even writing your first media query, use these techniques to make sure your base CSS is fluid and flexible, to ensure that your project is maintainable and efficient.