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.