3 Column CSS layout

March 5th, 2007 by Quatrux

3 Column CSS layout can be made in different ways, but I wanted to make one with divs and not html tables.. the way I wanted to make it is: I need a left menu bar, a right sidebar and the middle content bar.. the hardest thing for me was to make it without any width with set pixels, this was hard, but I managed to create such a layout with display: table; table-row and table-cell, where I created three table-cells for it, the secret is that the sidebars are using white-space: nowrap; I need them to stretch and be as wide as the text there is, I don’t want the links to break to a new line, if I don’t break a line with br, same with the other sidebar, but that means that the middle bar automatically will need to shrink when the sidebars stretch, this is quite hard to do, using html tables it would be quite easy.. using css display: table; is also easy, so where is the problem? Internet Explorer, that is the fucking problem! It doesn’t support display: table; as it should, so I created another stylesheet for IE, where the left sidebar is floating to the left and the right bat is floating to the right, I didn’t set any width, they are as wide as text, but how the hell to put the middle bar to use all the middle left space? Well, on IE you can write expressions, javascript expressions, so I just using javascript in css file (all my layout width) – (left sidebar width + right sidebar width) and got the middle width, it doesn’t work if javascript is off, but people who browse with javascript turned off understand that they are not getting all the features they can, besides, if you have javascript off, you will see the same layout, just not using all the available width! oh yea, I forgot to mention, that the middle bar is also floating to the left with float: left; here is the expressions code:

  1. div#content {
  2.         float: left;
  3.         width: expression((774(document.getElementById(‘menu’).clientWidth + document.getElementById(’sidebar’).clientWidth)) + "px");
  4. }

So this solves the issue with IE, this is a little hack to make it work as with display: table; If I haven’t thought of this, I was ready to make pages of my site which browse with IE that IE sucks and suck a dick if you browse with it :D

Posted in Webmastering | No Comments »

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment and don't be afraid of the spam protection!