Creating Flexible Web Layouts Using CSS

By March 10, 2016Web Design

Last time we talked about responsive web design, we introduced a cool CSS feature called media query. This allows us to make changes to our website from a single stylesheet. We’ve demonstrated it with a simple example by changing the background color of our div – if the screen width condition was met. Now, we’re going to continue our responsive web design series, and create a flexible web layout. Once you get the hang of media queries, creating flexible web layouts using CSS becomes pretty easy.

Creating Flexible Web Layouts Using CSS

Basic Website Template

Let’s start simple, by creating a basic website. So, we will write our styles for large resolutions, and then using media queries we will adapt the design to smaller screens. Here’s our index.html file:

<html>
<head>
<title>Simple Web Layout</title>
<link rel="stylesheet" type=”text/css” href="style.css" />
</head>
<body>
<div id=”content-wrapper”>
<div id=“main”></div>
<div id=”sidebar”></div>
</div>
</body>
</html>

And here’s our style.css file (we’re using the desktop-first design approach):

#content-wrapper {
max-width: 960px;
margin: 0 auto;
}

#main {
width: 66%;
display: inline-block;
}

#sidebar {
width: 32%;
display: inline-block;
}

Notice that we have two containers: main and sidebar, which are part of a wrapper div that has a max-width of 960px. This means that our #content-wrapper div can’t get wider than 960px, but it can be smaller. The #main takes 66% of our wrapper, while the #sidebar takes 32% in respect to our wrapper’s width.

Tip: When you’re using percentages to define the width of some child element, that value is derived from the parent’s width. So, when we set our #main to be 66% wide, it will be 66% of parent’s width. To clarify even further, #main’s parent is #content-wrapper, and it has a width of 960px. If you want to do the math, 66% of 960px are 633.6px. Here’s how it would look visually:

Creating Flexible Web Layouts Using CSS

This design will work just fine on large screen resolutions, but as soon as we start to shrink down the browser’s window, these elements will slowly disappear from the screen. We would have to scroll left and right in order to view the entire content. To avoid scrolling which results in bad user experience, we will make this simple website layout flexible to a smaller screen size using media queries.

Making Our Website Layout Responsive

We can make our layout responsive in two ways. First, we can add a media query in out existing style.css, or we can add media query in our <head> to determine whether to apply an additional style for smaller resolutions. We’re going to demonstrate both of these examples.

Media Query Within Out Stylesheet

To keep things simple, we’re going to create only 1 media query in our style.css. Here’s how it would look:

#content-wrapper {

max-width: 960px;

margin: 0 auto;

}

#main {

 width: 66%;

display: inline-block;

}

#sidebar {

width: 32%;

display: inline-block;

}

/* By now, the style.css looks exactly the same as before. From here, we’re making changes to make the website responsive */

/* Media Query for smaller Devices */

@media screen and (max-width: 768) {

#content-wrapper {

max-width: 680px;

}

#main {

width: 100%;

display: block;

}

#sidebar {

width: 100%:

display: block;

}

}

This media query will apply if the screen width becomes 768 pixels or lower, and it will overwrite the styles that we’ve specified at the beginning of our style.css.

Adding Additional Style Using Media Query

We can basically get the same result using media query. The query will determine whether it should apply additional stylesheet next to our style.css in the <head> section of our HTML document. We can do that by creating a new CSS file called style-small.css, which will have the styles that we would normally place inside a media query in a single stylesheet.

So out style-small.css will have:

/* These styles are exactly the same ones that we used in our media query. */

#content-wrapper {

max-width: 680px;

}

#main {

width: 100%;

display: block;

}

#sidebar {

width: 100%;

display: block;

}

And then, wi will slightly modify the <head> of our index.html file:

<html>

<head>

<title>Simple Web Layout</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

<link rel=”stylesheet” type=”text/css” media=”screen and (max-width: 768px)” href=”style-small.css” />

</head>

Once the screen width reaches 768px or lower, the additional style-small.css will be applied, and it will overwrite the existing element styles to make the website responsive.

What are the styles in our media query and style-small.css doing exactly?

It basically makes our wrapper smaller to fit into the screen width, and it resets our #main and #sidebar to have 100% of the parent’s width (#content-wrapper). Then, it displays our #main and #sidebar as block elements (which is they default display property to begin with).

Once you choose which approach you will use, here’s what you should get when you make the screen width 768px or lower:Creating Flexible Web Layouts Using CSS

 

Featured image credit: Jayel Aheram (via Flicrk)

 

Tom De Spiegelaere

About Tom De Spiegelaere

I love everything visual, from photography to graphic design and special effects. I'm the founder of MangoMatter and specialise in creating sites that not only convert, but also easily outrank the competition in Google, giving my clients a website that markets itself!