Sidebar

#sidebar {
  float: left;
  width:260px;
  margin-right: -260px;
  position: relative;
}
		

Main content

#content {
  float:left;
  width:700px;
  background:#eee;
  border-left: 260px solid #555;
}
		

This layout works by using a border on the content to show the background color behind the sidebar.

The border-width is equal to the width of the sidebar column. Because of this additional width the columns won't normally sit side by side.

We get them to both fit side by side in the container by giving the sidebar a negative right margin equal to its width.

The stacking context wants to place the sidebar content behind the border of the main content column, but we change the stacking context by adding position: relative to the sidebar, bringing it to the top of the stack.