Simple Single Column CSS Layout

This is the first in a series of posts detailing how to setup basic responsive page structures using CSS. In this post, I will be covering how to easily put together a single column layout. It’s pretty simple, but I’ll move on to more complex layouts in the next posts.

There are just a few things I want to mention before getting started:

The HTML structure will be coming from the Solum starter theme I released last week. Solum doesn’t contain any layout markup, so it gives a clean starting point.
I will not be including menus in these tutorials. For examples of how to handle menus in responsive design, I would suggest taking a look at the mo.js project.

HTML Structure

Before I write about the CSS, I want to show a simplified version of HTML that is displayed by the Solum theme.

<body>
	<div id="page">
		<div id="header" class="site-header">
			<div class="wrap">

				<div id="branding" role="banner">
					<p class="site-title"><a href="http://example.com">Site Title</a></p>
					<p class="site-description">Just another WordPress site...</p>
				</div><!--#branding-->

			</div><!--.wrap-->
		</div><!--#header-->

		<div id="main">
			<div class="wrap">

				<div id="primary">
					<div id="content" role="main">
						<p>Article content...</p>
					</div><!-- #content -->
				</div><!-- #primary -->

			</div><!--.wrap-->
		</div><!--#main-->

		<div id="footer" class="site-footer">
			<div class="wrap">

				<p class="site-credits">© Copyright owner</p>

			</div><!--.wrap-->
		</div><!--#footer-->

	</div><!--#page-->
</body>

This is very similar to the structure of the _s theme by Automattic as well as the Genesis Framework and the upcoming StartBox theme. I’ve tried to keep everything as simple and familiar as possible, while at the same time allowing for (almost) any layout to be achieved. As you can see, there is a #page div that contains the #header, #main, and #footer divs. These three divs in turn each hold a .wrap div. That’s about all we need to understand for now. Also note the #primary div that will hold the actual page content. In future tutorials we will include #secondary and #tertiary divs to hold the sidebars.

CSS Reset

We don’t need much of a reset for what we’re doing here. We just need to set all elements to use the “border-box” box model, remove the top margin from all elements, and remove all margin/padding from a few specific elements.

/* =Reset
-------------------------------------------------------------- */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 0;
}

html,
body,
div{
	margin: 0;
	padding: 0;
}

Single Column CSS Layout

Following the mobile first development philosophy, we’ll start with mobile styles and then add styles for tablets and then the full desktop styles using media queries. Actually, we’ll only start doing that once we add more columns to our layout. For a single column layout we don’t need media queries. We can simply use a fluid width layout that will account for all devices. First let’s add a little bit of color so we can tell the difference between the #header, #main, and #footer divs.

/* =Color
-------------------------------------------------------------- */

#header{
	background: #cccccc;
}

#main{
	background: #dddddd;	
}

Now that we can see what we’re working with, we’ll set up the structure.

/* =Structures
-------------------------------------------------------------- */

.wrap{
	max-width: 1200px;
	margin: 0 auto;
	padding: 1em;
}

#primary{
	max-width: 650px;
	margin: 0 auto;
}

Here’s how it works. The .wrap divs get a max-width of 1200px so on really large screens they don’t get too spread out. On any device smaller than 1200px wide, the .wrap divs will simply fill the entire width of the screen. Setting the margin to “0 auto” assures us that there will be no margin above or below the divs, but if the screen is wider than 1200px, the horizontal margins will be equal, which will center the div. Finally we add a 1em padding to the divs, so none of the content will be touching the edges of the screen on small devices. Here’s what it should look like on mobile.

CSS single column layout mobile

The #primary div holds our main content. It is more difficult to read longer lines of text, so we don’t want our main content to ever get wider than 650px. We use max-width instead of width so that the div simply fills the screen width on smaller devices, instead of requiring horizontal scrolling. Once again, we set a margin of “0 auto” to center the content when necessary. We don’t need to add the padding, because the padding from the .wrap div is already providing the padding we need. As you can see the #header and #footer spread out a bit on wider screens, but the #primary div never stretches out past 650px and remains centered.

CSS single column layout desktop

…and that’s it! Single columns are quite simple, but things will get more complex in a hurry as we add more columns over the next few tutorials.