Creating Fluid Layouts & Images with CSS

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

    content goes here
.wrapper {
    width: 800px;
}

http://blogs.adobe.com/dreamweaver/files/2015/12/1-fixed-width.jpg

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

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

http://blogs.adobe.com/dreamweaver/files/2015/12/2-fixed-width.jpg

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.

https://blog.adobe.com/media_757b9852902b66a488277f2a83e932f08c01cc21.gif

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

https://blog.adobe.com/media_3c3b3df0b84811615d941daaf8fd7ff22a95fea3.gif

fluid/percentage width

https://blog.adobe.com/media_6615be642f76111a7bc0b4300fae945862d309d4.gif

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

fixed width

http://blogs.adobe.com/dreamweaver/files/2015/12/6-fixed-vs-fluid.jpg

fluid/percentage width

http://blogs.adobe.com/dreamweaver/files/2015/12/7-fixed-vs-fluid.jpg

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.

View the Codepen below to see the full example.

See the Pen Flexible layout by christinatruong (@christinatruong) on CodePen.

Fluid images

You can also use percentages to create flexible images. width and max-width can both be used, just like in the previous example.

img {
    /* image stretches to 100% of its container */
    width: 100%;

    /* image will stretch 100% of its container until it
    reaches 100% of the width of the image file itself */
    max-width: 100%;
}

Let’s say you have three columns of content, containing an image that is bigger than the width of the columns. HTML

CSS

.column {
  width: 250px;
  border: 5px solid black;
  display: inline-block;
}

If the image is bigger than its container, it will “spill out” of its container.
http://blogs.adobe.com/dreamweaver/files/2015/12/9-fluid-images.jpg
Setting the image width to 100% will change that! This will make the images 100% of their container.

.column img {
  width: 100%
}

http://blogs.adobe.com/dreamweaver/files/2015/12/10-fluid-images.jpg
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.