Two column CSS layout

Updated Dani 2 524 Views

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 for gach94
gach94 0 Newbie Poster

Nice and neat job there!

Member Avatar for ODCHOI
ODCHOI 0 Newbie Poster

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

Member Avatar for holmes008
holmes008 0 Light Poster

Cool !

Member Avatar for monem
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.

Member Avatar for sunil8986
sunil8986 -7 Newbie Poster

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

Member Avatar for silveraden
silveraden 0 Junior Poster in Training

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

Member Avatar for kamaldin27
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

Member Avatar for MidiMagic
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, networking, learning, and sharing knowledge.

Edit Preview