Css Tutorial – How to arrange columns in css

Jul 12, 2012, by admin

Cascading Style Sheets (CSS) are the standard coding language for describing how web pages should appear in web browsers. Web sites often contain multiple columns. Find out how to format columns in CSS so you can adjust their location, size, and appearance as desired.

Steps

1.Structure your HTML correctly 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).

2.Find the name of the column id in your CSS (like “#sidebar”).

3.choose whether you want the column to appear to the right or the left.

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

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.

Modify Column Layout with CSS

1.Find the name of the column wrapper id in your CSS (like “#sidebar-wrapper”).

2.Determine how ample you want the column to be. You can set this in percentages or pixels.

3.Add that “width” to the column wrapper id (like “sidebar-wrapper { width: 30%; }”).

4.Determine your desired column “height” and add that to the column wrapper id (like “sidebar-wrapper { height: 100%; }.

Modify Column Appearance with CSS

1.Determine what size padding, margins, and borders you want on either side of the column.

Padding is space between the edge of your column background and the text.

Margin is the space after the edge of the background before the next column begins.

2.Add the padding and margins to the column name id (like “#sidebar { padding: 0 5px; margin: 0 5px; border: 2px dotted #fff; }”, which gives the column 5 pixels of margin and padding on either side, but none on the top and bottom).

3.Add your desired colors to the column name id. For example, for a black background on white text, you would use “#sidebar { background-color #000; color #fff; }”.

4.Pick which HTML tags you want to give special appearances and write their CSS that refers to the tags that are specifically within the column name id. For example, to turn all “h3” tagged text red in your sidebar, you would write “#sidebar h3 { color #f00; }”.

5.Choose any font changes you want in that particular column, and put that code in the column name id (like #sidebar { font-size: 0.8em; }.

6.Enjoy knowing how to arrange columns in CSS.