Two column CSS layout

 
2
 

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>

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

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

</div>
Member Avatar
Dani Horowitz

While pursuing a Computer Science degree, I founded DaniWeb.com, an online community for developers and IT professionals. I coded the backend platform from the ground up and I also do all of the advertising sales and SEO. I'm a super-geeky programmer with a passion for Internet marketing.

 
0
 

Nice and neat job there!

 
0
 

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

 
0
 

Cool !

 
0
 

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.

 
0
 

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

 
0
 

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

 
0
 

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

 
1
 

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

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