Two column CSS layout


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.

<div style="width:900px">

<div id="leftColumn" style="float:left; width:200px;">
          Left sidebar with a width of 200 pixels

<div id="rightColumn" style="float:right; width:650px;">
          Body content

<div style="clear:both"></div> <!-- Catches the shorter column up -->

Member Avatar
Dani Horowitz

I run DaniWeb. I coded (and currently maintain) the site from scratch using PHP/MySQL/jQuery and grew it into a thriving community of over 1 million IT professionals and 10 million visitors a month, making it not only one of the largest social media websites in its niche, but one of the largest publications on the web to date. I sell advertising. I host annual events throughout Manhattan during Internet Week, Advertising Week and Social Media Week which each see an average of over 1000 attendees. I host a bimonthly meetup group for techies on Long Island and eastern Queens. I speak on panels at search engine conferences. I run a brick-and-mortar coworking community for the tech industry in Queens, NY. I multitask. I consider myself a platform creator and a community builder. I'm a super-geeky programmer with a passion for Internet marketing. I am not for hire.


Nice and neat job there!


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


Cool !


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.


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


Wow, this is very helpful. Should I delete the numbers? Thanks


Well that really an interesting one, i must say after reading i have educated my mind and aquired ideas. Thank you miss dani


It is fixed for one display size. Computers with other monitor resolutions may not display it properly.

Everyone kept telling us to make table-less columns. I researched why. It is because readers for the blind give the table row and column coordinates.

The problem with using div tags for columns is that it falls apart when the screen resolution changes enough that the content is wider than the screen, or way narrower than the screen. With monitors ranging from widescreen high-res ones to the early LCD ones with 640 X 480 resolution.

There are two ways to get around this:

  1. Go ahead. Use tables. The w3c didn't provide a reliable replacement for the table for this purpose. Their main call for not using tables was the use of tables to make margins and borders. They did provide reliable replacements for the table for that purpose.

  2. Use the div tag with the display styles table-row and table-cell. It works in many (but not all) cases. But it does not work on some old browsers, and some reader programs call them tables.

Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

This is an OP Kudos discussion and contributors may be rewarded
Start New Discussion
Tags Related to this Article