Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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:

CSS:

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
Problem courtesy of: Jean-Marie Comets

Solution

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/

Solution courtesy of: A.K

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×