Two column CSS layout

Dani 2 Tallied Votes 504 Views Share

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 -->

gach94 0 Newbie Poster

Nice and neat job there!

ODCHOI 0 Newbie Poster

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

holmes008 0 Light Poster

Cool !

monem 0 Newbie Poster

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.

sunil8986 -7 Newbie Poster

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

silveraden 0 Junior Poster in Training

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

kamaldin27 0 Newbie Poster

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

MidiMagic 579 Nearly a Senior Poster

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.