html Syntax

Blogs RSS

Forums RSS

Two column CSS layout

Please support our HTML and CSS advertiser: Programming Forums

•

Apr 13th, 2007

Views: 9,287

cscgal

I am often asked how to create a tableless two column CSS layout so I thought I would just post it here for once and for all.

Last edited : Oct 20th, 2007.

Show Printable Version

•

html Syntax

Toggle Plain Text

<div style="width:900px">
 
<div id="leftColumn" style="float:left; width:200px;">
          Left sidebar with a width of 200 pixels
</div>
 
<div id="rightColumn" style="float:right; width:650px;">
          Body content
</div>
 
<div style="clear:both"></div> <!-- Catches the shorter column up -->
 
</div>

Comments (Newest First)

sunil8986 | Newbie Poster | 2 Days Ago

•

You can easily create two column table less by using <div> tag with "float" attribute (mentioning float value "left")

monem | Newbie Poster | Dec 21st, 2008

•

Hi'' i divided my page into tow parts(left and right) with div tag,so i want to load right part content into right part without loading all the page.

holmes008 | Light Poster | Apr 11th, 2008

•

Cool !

ODCHOI | Newbie Poster | Apr 3rd, 2008

•

Hi, do you know how to change blogger.com blog layout with the ones like friendster or myspace? Thank you.

gach94 | Newbie Poster | Dec 2nd, 2007

•

Nice and neat job there!

Post Comment on Code Snippet

•

Only community members can submit or comment on code snippets. You must register or log in to contribute.