1

What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout ?

<div id="wrapper">
        <div id="header">
            This is the Header
        </div>
        <div id="top-nav">
            Top Navigation
        </div>
        <div id="leftcolumn">
            Left Column
        </div>
        <div id="content">
            content column
        </div>
        <div id="rightcolumn">
            Right Column
        </div>
        <div id="footer">
            This is the Footer
        </div>
    </div>




#wrapper {width:970px;margin:0 auto }
 #header {height:100px  }
 #top-nav {height:30px}
 #leftcolumn {  }
 #content {  }
 #rightcolumn {  }
 #footer {height:100px}

With this XHTML code what css should be written to make this 3 col layout.

  • cross browser compatible including IE6 (without CSS hack or extra conditional css for IE)
  • Width in Px
  • Centered
  • Font-sizing in em
  • Number of column can be extended or removed 1-4,5 etc
  • SEO Enabled
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 1
    Normally I'm not anal, but this question has been asked thousands of times and you should be able to google up a hundred or so solutions. Do you have a specific markup structure you're catering it to, such as content before nav? – meder omuraliev Oct 22 '09 at 15:59
  • 1
    Related questions: http://stackoverflow.com/questions/533607/css-three-column-layout-problem http://stackoverflow.com/questions/1042101/cross-browser-three-column-layout http://stackoverflow.com/questions/867667/is-there-a-simple-3-column-pure-css-layout – Sinan Ünür Oct 22 '09 at 15:59
  • You could at least point out that the image is from http://matthewjamestaylor.com/blog/ – Sinan Ünür Oct 22 '09 at 17:29

2 Answers2

1

Um, this is pretty darn easy with floats and faux columns.

Why do you have so many containers around the columns? You only need one. To clear the floats, do

#container {
    width:960px; /* or 100%, or whatever. It needs to be set for it to work in IE tho */
    overflow:auto; /* hidden works too */
    background:url(./img/faux-columns.gif) repeat-y; /* google faux columns for A List Apart article */
}

and for the columns themselves

#col1 { width:520px; float:left; margin-right:20px; }
#col2 { width:200px; float:left; margin-right:20px; }
#col3 { width:200px; float:left; }
Kevin C.
  • 2,499
  • 1
  • 27
  • 41
0

Use jQuery + its layout plug-in. Keep your full head of hair.

Bill Bell
  • 21,021
  • 5
  • 43
  • 58