Tutorial: Responsive Two Column Layout Using Box-Sizing
Posted in Tutorials
There are a few ways of making a responsive two-column layout. In this tutorial, we show you how using the CSS box-sizing property. A responsive two column layout has two columns side-by-side when browser viewport is wide enough to support it (such as when user is on a desktop and browser width is set to be greater than say 500px). The exact pixel width (here we use 500px) is known as a “setpoint” and is choosen by you based on the suitability of the design.
If viewport is less than 500px say, on a mobile device the two columns will become one on top of another with the left column on top.
Here is link to working example.
1. Responsive Starter coder
We start with basic responsive starter code. But to keep tutorial simple and focused on the basic two-column layout, we omit html5shiv.js and respond.js and assume IE 9 or greater. We also omit normalize.css, so that you can see how only our CSS affects the layout. So let’s start with …
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Two Column Layout using box-sizing</title>
<style>
</style>
</head>
<body>
<div id="pagewrapper">
</div>
</body>
</html>
We also put the CSS embedded at the top of the page only for the purpose of this tutorial.
Within our body, we added a div to represent our page (id=”pagewrapper”). We give our page a light gray background and a border and some margin to push it a little away from the edge of the browser with this CSS here…
page style
2. Two-column Mobile layout
Within our pagewrapper, we add HTML structure for two columns containing some place-holder Lorem ipsum text…
html structure for two columns
The contents of the two columns are contained in div with class=”column-half”. I called it that because each column is supposed to take up half the width of the page.
As is common with many CSS grid system, we contain the two columns in a “row” container (this is the div with class=”row”). If you are using any other grid system with your page, you may get a name conflict because they will often also name it “row”. You can then use any arbitrary name. But in this tutorial, I’m assuming you are not using any other grid CSS frameworks.
If we look at our page in our browser now, it looks like this…
two columns mobile layout
I’ve added CSS …
.column-half { outline: 1px solid red; }
so we can see the outlines of the two columns.
The column are stacked. Good. This is how it should look in a mobile layout. We are doing a mobile first design, which mean by default show the mobile layout first.
3. Two column desktop layout
Now the work is to get the two columns to be side by side when browser viewport is 500px or greater. In other words, when viewport has min-width of 500px. We add this media query …
two-column media query
To make our “column-half” be side-by-side, we float them left. When we float things, we should put a width. So we put a width of 50% so each column takes up half the width of the page. Let’s see what we get…
two columns side by side
The two columns are side-by-side alright (as long as your browser is 500px or greater). But notice something, we lost the gray background on our page. Resize your browser to be narrower than 500px and see the mobile view again.
3. Clearing the Float
The gray background disappeared because the pagewrapper collapsed into zero height. This is what happens when everything inside pagewrapper is floated. There is nothing non-floated to push it out, unless we “clear the float”.
We apply the clearfix technique on the container “row” to clear the float by …
clear floats for two columns
Now we got our page background back…
two columns with background
4. Adding Padding
See how the text of the two columns are runs right next to each other. We need some horizontal padding to separate them. We try adding the following CSS …
add horizontal padding
Oops. We get the following…
two column with padding
The two columns are no longer side-by-side, even though at the current browser width they should be.
To understand why, we have to remember that the width definition in CSS is the “content width” not including any padding. The width of the column is 50% as set in the CSS and when we add padding of 20px to the left and right padding, we get a width of 50% + 40px which is greater than half the page width. With two columns each greater than 50%, they no longer can fit side by side on the page.
5. Using box-sizing: border-width
One way to remedy is to change the width definition in the CSS rule so that the width includes the “content width” and “padding width” and “border width”. Adding “box-sizing: border-width” as shown will effect this change in the CSS box-model.
add box-sizing border-box
And now we get the two columns fitting side-by-side even with padding…
two column padding fit
Related Posts
Tags
Share This
