Two Column CSS Layout

by Douglas Ludlow

HTML

<div class="body">
    <div class="left">
        Nam gravida
    </div>
    <div class="content">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed pulvinar urna. Nunc nec risus ultrices, interdum enim id, pretium metus. Maecenas elit felis, blandit et pretium in, sagittis non erat. Integer laoreet varius orci a rhoncus. Quisque sit amet accumsan nulla. Donec commodo massa eu turpis feugiat sodales. Morbi ut elit mauris. Praesent laoreet enim quis magna malesuada, ac ultrices felis iaculis. Maecenas in felis libero. Fusce elementum, quam at consectetur sagittis, sem justo rutrum augue, dictum ultricies leo lectus in magna. Donec pulvinar gravida tellus. Nam turpis lorem, tristique id arcu sed, viverra ornare nulla. Nunc vestibulum tristique urna quis lacinia.
        </p><p>
Morbi quis tellus placerat, facilisis mi at, semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dignissim arcu eget lacus tincidunt vehicula. Vestibulum vitae luctus tellus. Aenean porta rhoncus ligula sed suscipit. Mauris nec placerat enim. Quisque eu tellus magna. Etiam at congue turpis. Donec imperdiet in lectus at euismod. Proin eget ante commodo, imperdiet mauris at, posuere sapien. Proin blandit eget turpis quis placerat. Sed ac orci consequat, vulputate enim nec, luctus mi. Vivamus aliquam, justo dignissim tincidunt congue, diam arcu viverra sapien, et sagittis arcu ipsum vel lorem.
        </p><p>
Nam gravida massa nec sem consequat, in sagittis ante porttitor. Cras dapibus mollis eros, eu sagittis velit pharetra a. Praesent pretium iaculis iaculis. Phasellus id purus ut eros faucibus ullamcorper. Suspendisse at orci erat. Donec volutpat lectus ac elit elementum, pretium congue lectus feugiat. Aenean nunc justo, accumsan eget neque a, pretium eleifend nulla. Aliquam egestas consequat varius.
        </p><p>
Nunc enim nisi, iaculis et suscipit vitae, cursus id arcu. Cum sociis natoque...

CSS

.body {
    width: 1000px;
    background: -webkit-linear-gradient(left, #333 1px, #fff 1px);
    background: -moz-linear-gradient(left, #333 1px, #fff 1px);
    background: -o-linear-gradient(left, #333 1px, #fff 1px);
    background: linear-gradient(left, #333 1px, #fff 1px);
}

.left, .content {
    float: left;
}

.left {
    width: 200px;
}

.content {
    width: 800px;   
}
}