Two column layout with fixed width sidebar and fluid main content

I made a basic jsfiddle of what I’m attempting to do. I want my main content on the left and sidebar on the right. The sidebar needs to be a fixed width and the main content on the left would just stretch to fix the remaining space. You can see from my jsfiddle that the sidebar drops below the main content because it comes after it in the html. I know I can get this to work by placing the sidebar above the main content area but my question then is if I set a breakpoint for responsive design, I want the sidebar to fall below the main content area. Is there a magic way to make that happen with the sidebar markup sitting above main in the html?

I think I answered my own question but would still appreciate any thoughts on this technique: http://jsfiddle.net/S7SH5/

I ended up wrapping #main in another div: #main-wrap and giving #main-wrap a width of 100%. #main then go a margin-right of 200px which is equal to the width of the #sidebar plus the gutter between #sidebar and #main. #sidebar then got a width of 180px with a margin-left: -180px (equal to the width) which pulls the sidebar back up equal with the main content area instead of below it.

Yes that’s a pretty standard negative margin trick.:slight_smile:

I would probably use display table and table-cell instead (ie8+) which keeps the html simpler and has the benefit of equal columns.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* 
	Title:		Master Styles for Screen Media
	Author: 	Deron Sizemore
*/


/* reset 
========================================== */

:link, :visited {
	text-decoration: none;
}
ul, ol {
	list-style: none;
}
h1, h2, h3, h4, h5, h6, pre, code, p {
	font-size: 1em;
}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
	margin: 0;
	padding: 0;
}
a img, :link img, :visited img {
	border: none;
}
address {
	font-style: normal;
}
*:focus {
	outline: none;
}
textarea {
	overflow: auto;
}  /* remove scroll bar in IE */
html {
	overflow-y: scroll;
}  /* FF scroll bar jump fix */
img {
	vertical-align: bottom;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
input, fieldset {
	border: 0;
}
/* apply a natural box layout model to all elements */
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/* clearfix */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/* main
--------------------------------------------- */

body {
	font: 100%/1.5 "Open Sans", Helvetica, Arial, Sans-Serif; /* font size equal to 14px */
	color: #444;
}
#content {
	clear: both;
	padding: 30px 0 0;
	max-width: 1000px;
	margin: 0 auto;
	width:100%;
	display:table;
	border-spacing: 15px 0;
}
#main {background: #ccc;}
#sidebar {
	background: green;
	width:175px
}
.tc {
	display:table-cell;
	padding:10px;
}
#sidebar h2 {
	font-size: 16px;
	color: #999;
	margin-top: 20px;
}
#sidebar ul {
	font-size: 12px;
}
#sidebar ul li {
	margin-top: 10px;
}
</style>
</head>

<body>
<div id="content">
		<div id="main" class="tc"> main Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, recusandae, fuga quod perspiciatis dicta quam ex vero hic sit ratione ullam id illo delectus accusantium distinctio obcaecati molestias nam reiciendis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, animi, eligendi, pariatur cumque cum rerum necessitatibus dolorem quis ut adipisci nulla odio fugit. Vel, dolor, culpa officia numquam velit facere.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, accusantium, quidem nisi sapiente recusandae dolor  officiis ipsa excepturi commodi libero et neque quo porro quisquam eius culpa iure dicta repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, iusto, harum, molestiae veniam quia laboriosam ad consequatur deserunt molestias ex at quidem itaque exercitationem commodi veritatis repellendus maxime quisquam quasi. </div>
		<div id="sidebar"  class="tc">sidebar  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, numquam, perferendis sapiente totam eos enim omnis nostrum fugit dolore obcaecati libero repellat accusantium eveniet aperiam incidunt nisi facilis! Aliquam, maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, illo, totam, temporibus praesentium distinctio unde modi alias ex provident dignissimos nemo repudiandae cum tenetur aliquam sapiente repellat voluptates! Perspiciatis, unde! </div>
</div>
</body>
</html>

The only tricky thing is to use border-spacing to make the space between columns as border-spacing gives you some space at the outside edges also although using an extra wrapper you can offset this if needed.

Awesome! thanks!