Ok this is a really simple question I guess, but I can’t figure it out. So many sites - chrisbrogan.com comes to mind - have a dark background (#233038) to the sides of the body, with a white background for where all the text is. How do they do this?
Hi,
The body element has the background set to #233038 and then an inner element that contains the content has the background set to white. On that site they are also using an image that repeats vertically on the inner element to get the 2 full length equal columns.
Is that what you meant?
The site doesn’t seem to be using 100% height columns so basically something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
height:100%;
}
body {
background:#233038;
}
#outer {
background:#fff;
width:56em;
margin:auto;
padding:10px;
}
p {
margin:0 0 1em;
padding:0 20px;
}
</style>
</head>
<body>
<div id="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem non suscipit consectetur, massa nulla volutpat ligula, eget hendrerit leo lectus sit amet massa. Nulla non nunc lectus, eget varius nunc. Maecenas euismod consectetur massa, in malesuada odio tempor ut. Nulla tincidunt augue vel dolor aliquam sed ultricies tellus fringilla. In nisl purus, placerat non mollis eget, faucibus nec ipsum. Etiam nec dui ut purus dapibus aliquet non sed nibh. Nam et pellentesque lorem. Duis ut posuere justo. Quisque et placerat libero. Donec et enim id quam porta ultricies ut adipiscing diam. Pellentesque pellentesque eleifend nisi, sit amet tempor nunc euismod eu. Curabitur vel viverra leo. Maecenas adipiscing molestie nibh sit amet auctor. Ut lectus dolor, tempor vel volutpat eget, iaculis et dui. In quis ante orci. Nullam non elit ligula, sit amet pellentesque orci. Donec consequat odio sed eros tempus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras erat mi, tristique a lacinia in, laoreet sit amet diam. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem non suscipit consectetur, massa nulla volutpat ligula, eget hendrerit leo lectus sit amet massa. Nulla non nunc lectus, eget varius nunc. Maecenas euismod consectetur massa, in malesuada odio tempor ut. Nulla tincidunt augue vel dolor aliquam sed ultricies tellus fringilla. In nisl purus, placerat non mollis eget, faucibus nec ipsum. Etiam nec dui ut purus dapibus aliquet non sed nibh. Nam et pellentesque lorem. Duis ut posuere justo. Quisque et placerat libero. Donec et enim id quam porta ultricies ut adipiscing diam. Pellentesque pellentesque eleifend nisi, sit amet tempor nunc euismod eu. Curabitur vel viverra leo. Maecenas adipiscing molestie nibh sit amet auctor. Ut lectus dolor, tempor vel volutpat eget, iaculis et dui. In quis ante orci. Nullam non elit ligula, sit amet pellentesque orci. Donec consequat odio sed eros tempus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras erat mi, tristique a lacinia in, laoreet sit amet diam. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem non suscipit consectetur, massa nulla volutpat ligula, eget hendrerit leo lectus sit amet massa. Nulla non nunc lectus, eget varius nunc. Maecenas euismod consectetur massa, in malesuada odio tempor ut. Nulla tincidunt augue vel dolor aliquam sed ultricies tellus fringilla. In nisl purus, placerat non mollis eget, faucibus nec ipsum. Etiam nec dui ut purus dapibus aliquet non sed nibh. Nam et pellentesque lorem. Duis ut posuere justo. Quisque et placerat libero. Donec et enim id quam porta ultricies ut adipiscing diam. Pellentesque pellentesque eleifend nisi, sit amet tempor nunc euismod eu. Curabitur vel viverra leo. Maecenas adipiscing molestie nibh sit amet auctor. Ut lectus dolor, tempor vel volutpat eget, iaculis et dui. In quis ante orci. Nullam non elit ligula, sit amet pellentesque orci. Donec consequat odio sed eros tempus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras erat mi, tristique a lacinia in, laoreet sit amet diam. </p>
</div>
</body>
</html>
Or you could do the full length thing like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
height:100%;
}
body {
background:#233038;
}
#outer {
background:#fff;
width:56em;
margin:auto;
padding:0 10px;
min-height:100%;
}
* html #outer {
height:100%
}
p {
margin:0 0 1em;
padding:0 20px 10px;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {/* operafix*/
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem non suscipit consectetur, massa nulla volutpat ligula, eget hendrerit leo lectus sit amet massa. Nulla non nunc lectus, eget varius nunc. Maecenas euismod consectetur massa, in malesuada odio tempor ut. Nulla tincidunt augue vel dolor aliquam sed ultricies tellus fringilla. In nisl purus, placerat non mollis eget, faucibus nec ipsum. Etiam nec dui ut purus dapibus aliquet non sed nibh. Nam et pellentesque lorem. Duis ut posuere justo. Quisque et placerat libero. Donec et enim id quam porta ultricies ut adipiscing diam. Pellentesque pellentesque eleifend nisi, sit amet tempor nunc euismod eu. Curabitur vel viverra leo. Maecenas adipiscing molestie nibh sit amet auctor. Ut lectus dolor, tempor vel volutpat eget, iaculis et dui. In quis ante orci. Nullam non elit ligula, sit amet pellentesque orci. Donec consequat odio sed eros tempus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras erat mi, tristique a lacinia in, laoreet sit amet diam. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem non suscipit consectetur, massa nulla volutpat ligula, eget hendrerit leo lectus sit amet massa. Nulla non nunc lectus, eget varius nunc. Maecenas euismod consectetur massa, in malesuada odio tempor ut. Nulla tincidunt augue vel dolor aliquam sed ultricies tellus fringilla. In nisl purus, placerat non mollis eget, faucibus nec ipsum. Etiam nec dui ut purus dapibus aliquet non sed nibh. Nam et pellentesque lorem. Duis ut posuere justo. Quisque et placerat libero. Donec et enim id quam porta ultricies ut adipiscing diam. Pellentesque pellentesque eleifend nisi, sit amet tempor nunc euismod eu. Curabitur vel viverra leo. Maecenas adipiscing molestie nibh sit amet auctor. Ut lectus dolor, tempor vel volutpat eget, iaculis et dui. In quis ante orci. Nullam non elit ligula, sit amet pellentesque orci. Donec consequat odio sed eros tempus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras erat mi, tristique a lacinia in, laoreet sit amet diam. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem non suscipit consectetur, massa nulla volutpat ligula, eget hendrerit leo lectus sit amet massa. Nulla non nunc lectus, eget varius nunc. Maecenas euismod consectetur massa, in malesuada odio tempor ut. Nulla tincidunt augue vel dolor aliquam sed ultricies tellus fringilla. In nisl purus, placerat non mollis eget, faucibus nec ipsum. Etiam nec dui ut purus dapibus aliquet non sed nibh. Nam et pellentesque lorem. Duis ut posuere justo. Quisque et placerat libero. Donec et enim id quam porta ultricies ut adipiscing diam. Pellentesque pellentesque eleifend nisi, sit amet tempor nunc euismod eu. Curabitur vel viverra leo. Maecenas adipiscing molestie nibh sit amet auctor. Ut lectus dolor, tempor vel volutpat eget, iaculis et dui. In quis ante orci. Nullam non elit ligula, sit amet pellentesque orci. Donec consequat odio sed eros tempus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras erat mi, tristique a lacinia in, laoreet sit amet diam. </p>
</div>
</body>
</html>
Hope that’s what you meant 
Awesome! the second way is the way I’m interested in. thanks!!