Home/ Questions/Q 842521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T05:58:35+00:00

How to create a perfect 3 columns layout using CSS , with cross-browser support

  • 0

How to create a perfect 3 columns layout using CSS , with cross-browser support ?

I have 3 divs like

<div class="clm1">Some content</div>
<div class="clm2">Some content</div>
<div class="clm3">Some content</div>

tried googling but all were made or css3 . I need a perfect 3 column in basic css. Please help

update
Perfect in the sense, no huge coding required but supported by all browsers and easily modifiable

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Wrap all three in a parent element (in my example a <div>). Give all three <div> elements a float:left; CSS property and a non-auto width property. Then use the Faux Columns trick to give them background colors.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Bubbling!</title>
    <style type="text/css">
        .three-columns .column {
            width:33%;
            float:left;
        }
    </style>
  </head>
  <body>
    <div class="three-columns">
        <div id="clm1" class="column">Some content</div>
        <div id="clm2" class="column">Some content <br />Some content <br />Some content <br />Some content <br /></div>
        <div id="clm3" class="column">Some content <br />Some content <br />Some content <br />Some content <br />Some content</div>
    </div>
  </body>
</html>

    In the example I’ve taken the liberty of changing your class attributes to id attributes as they didn’t feel appropriate for a class attribute.

    • 0