A clean CSS3 3-column layout, where to start?

Question

I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and CSS3.

For the general design, I'm working on a very clean white and gray tones style, with many paddings and margins. My problem resides in the home page: I'd like to have a 3-column centered layout. But where to start? I've tried some floating, but in vain.

Am I doing this right ?

HTML:

<div class="colwrapper">
    <div class="ltcol"></div>
    <div class="ctcol"></div>
    <div class="rtcol"></div>
</div>

CSS:

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }

Answer 1

your css should be like this:

.ltcol, .ctcol { float:left; }
.rtcol { float:right; }

The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.

For More details you must have to read this intresting article.

See This Demo: http://jsfiddle.net/akhurshid/YRWLV/