Two column CSS layout

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 402,506 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,825 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

•

Apr 13th, 2007

Views: 5,189

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)

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

•

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

•

DaniWeb Marketplace (Sponsored Links)

DaniWeb Home > Code Snippets > html Syntax

Two column CSS layout