How to Format Columns in CSS

Step-by-Step Guide

1. 1

   Step 1: Structure your HTML properly for optimal CSS performance.

   You want 2 "id"s surrounding each column, to avoid layout issues.
   
   Name the first id with the column purpose, like "sidebar".
   
   You will put all CSS for the column content here.
   
   Name the second id with the column purpose plus "wrapper"
   
   like "sidebar-wrapper".
   
   You will put all CSS for column layout here.
   
   This id will surround the other id. (So in your HTML, you'll have something like div id='sidebar-wrapper' inside < > immediately followed by div id='sidebar' (again in < >) followed by CONTENT and /div inside < > (repeated twice). ,,, If you want more than 2 columns, you'll need to start off with a 2-column structure, then break those columns further.
   
   For example, if you want 3 columns, you'll start with a main column and a side column then put 2 columns within the main column, with one floating right and one floating left.
2. 2

   Step 2: Find the name of the column id in your CSS (like "#sidebar").

3. 3

   Step 3: Decide whether you want the column to appear to the right or the left.

4. 4

   Step 4: Add "float: right;" or "float: left;" to the CSS for the id name (like "#sidebar { float: right; }").

Detailed Guide

About the Author