3 columns, best compatibility possible, need advice

I’m trying to make a simple design where the most important factor is compatibility:

IE 5.5, IE 6, IE 7, and IE 8+
Firefox 3+
Safari 5+
Chrome 7+

I tried using a same height column and a footer, but if you detect browser problems we can drop the same height column css code and just use faux columns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="Test" />
	<meta name="keywords" content="test" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<!--[if IE]>
<style type="text/css">
div {zoom:1; height: 1%;}
</style>
<![endif]-->
<div class="wrapper">
<div class="header">
<p>Header</p>
</div>
<div class="column" id="left">
<p>Left Column</p>
</div>
<div class="column" id="content">
<h1>Content</h1>
</div>
<div class="column" id="right">
<p>Right Column</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
/* CSS */

body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
color: #fff;
padding:0;
margin:0;
text-align: center
}
.wrapper {
width:960px;
margin:0 auto;
text-align:left
}
.header {
width: 100%;
height:50px;
float: left;
padding: 0px;
margin: 0;
background: #333 url(none) top left repeat-y
}
.column {
float:left;
height:350px
}
#left {
width:260px;
background: #333 url(none) top left repeat-y
}
#content {
width:500px;
background: #333 url(none) top left repeat-y
}
h1 {
font-size: 24px;
margin: 0
}
#right {
width:200px;
background: #333 url(none) top left repeat-y
}
.footer {
clear:both;
width: 100%;
padding:0px;
margin:0;
height:100px;
background: #333 url(none) top left repeat-y
}

I suggest to have a look at the website of Paul OB He has plenty of examples with good instructions.

I’ll take a look at those examples.
I’ve tested so many, really dozens of templates…
Some have complicated code or hacks that we don’t know if they will keep working for IE 9+ …

The examples on Paul’s site are not templates. He uses pure CSS to get things going. I rare situations he’s using a hack for IE6, but like I said that’s rare.

So don’t worry about IE9, If you should worry about that at all

For the non-same height version I see he uses javascript, I would like to use CSS-only…
http://www.pmob.co.uk/temp/3col-min-max-basic.htm

Some adaptation is possible though.

My version validates correctly, but I wanted to have your opinion, I haven’t tested it in IE 5.5 or IE 6, nor tried browsershots or any other browser simulator.

I see what you say. I can understand (or do I?) your concerns about IE6, but IE 5.5 is not even mentioned in any statistics any longer. And according to W3 the percentage of IE6 users has droped to 4.8%. W2 among IE users. I know, before someone corrects me, that 4.8% is still a lot of people and of course all depends on the target group as well, but hey dropping nearly 1 % in a month is a lot as well, specially because of that drop and the same drop for IE7 , brought the overall figure for IE down from 31.1 % to 29.7 %

So it’s entirely up to you, how much weight you would like to put on those to very old browsers!

I agree with you, I don’t want to write a lot of extra code for IE 5.5 …
I have those extra 5 lines in the html and an align in the css, and that is it, but even so I don’t know if they are enough :slight_smile:

I have to download a simulator (I’ve seen two free ones with good reviews), browsershots is too slow for me…

So there are apparently no errors on my coding? I know it validates perfectly, but I don’t know if it works in all (old) browsers…

The IE style declaration should be inside the <head></head> area.

The javascript in my demo is only for the min and max widths for IE6 which IE6 does not support. It does not need the javascript at all if you don’t mind the layout breaking at small widths. If you want a fixed width then the js is no needed.

Your example is a fixed width and doesn’t therefore need any min or max widths and can be a simple 3 column floated layout as you have already done. You have three simple fixed width columns floated across which will work for all browsers without any problems.

However, you can’t just set a height for the columns as that would be nonsense because the layout could never grow. Remove the height from the columns and let the content dictate the height. You cannot make equal columns using height alone unless you want to apply scrollbars to all those elements which would be a usablility nightmare.

In a fixed width layout like that simply create an image that contains all three column colours and repeat it on your main wrapper (not on the individual columns). In that way all columns will be equal.

More information here.

Hope that helps :slight_smile:

Well I’m afraid your version may well have major trouble because you have this rule for all IE versions.


[B]<!--[if IE]>[/B]
<style type="text/css">
div {zoom:1; height: 1%;}
</style>


Effectively any divs that can resolve their height will be cut to a 1% height only and content will overflow or be hidden (if float clearing mechanisms are used - i.e. overflow:hidden).

You should not also apply zoom willy nilly to all div elements as “haslayout” used unwisely causes as much trouble as not applying it. Only apply haslayout to containers that need it. (e.g. containers that hold complicated content such as floats and positioned elements). Elements that contain mainly text do not need haslayout.

You should be excluding IE8 and upwards from those conditional comments anyway.


[B]<!--[/B][[B]if lt IE 8]>[/B] 

Apply zoom to the element in question and not all divs. There is no need to apply zoom and height:1% as they are doing the same thing. They both apply haslayout so just use zoom because its safer (if you don’t mind using proprietary code).

You must understand what the rules are being used for and then you can decide whether they will cause problems in other browsers. The hacks are there for a reason and you must know what they do and why they are there before you can make decisions accordingly :slight_smile:

Thank you for getting back so quickly :slight_smile:
Yes, I was also afraid of that, especially because after IE 9+ we don’t know what will happen to most hacks…

I know that one is for IE 5.5 and another for IE 6, but no knowledge about if it would bring problems when working together (to avoid extra styles), this is why I’m asking this, to correct potential problems this may have.

Are we still far away from an almost perfect solution? Reducing hacks to the minimum possible and without using javascript?
How would you change this while reducing code to a minimum?

My layout will always be fixed, width and height (more images than text, so I know the exact height), can I keep that column height code without any compatibility problem with older browsers? I’ve tested several now.

I’ve been reading your helpful article:

And will make some according changes :slight_smile:

I’ve been investigating, and I still have thousands of users using IE6, but almost none using 5 or 5.5

You seem to be missing the point a little:)

You don’t supply any hacks to IE9 and you only target dead browsers with known hacks when used in the main stylesheet. You don’t supply any rules to browsers that you don’t yet know about. That’s why you must exclude ie9 from your conditional comments.

I know that one is for IE 5.5 and another for IE 6,
No, the hacks you had are the same haslayout trigger and either will work for ie5.5 and above. However as all your divs in your example have "haslayout anyway then your IE rules are not needed at all. Any block element with a dimension will already be in haslayout mode and no hacks needed.

Are we still far away from an almost perfect solution?

You have three floated columns. It couldn’t get much simpler and will work everywhere as long as you add the dimensions up correctly.:slight_smile:

I would say though that you should only float elements when you have a reason to do so. Your header doesn’t need to be floated so I wouldn’t float it. Some older browsers have problems where everything is floated.

My layout will always be fixed, width and height

No it won’t:) I could resize my text and the whole layout will break.

This is the biggest mistake that beginners make and you must never set the height of your fluid content containers. I can’t stress this strongly enough and it’s something we see broken daily in the forums. Never use a height for text content and never second guess that your layout will always be that height unless you are going to have it all controlled by multiple scrollbars - which as I mentioned above is a usability nightmare.

Users will have different text sizes and any fixed height containers will see text breaking out. If you must set a containers height and it holds text content then use em height. However you would never do this for your main containers such as floated columns because that approach is doomed to failure form the start.

can I keep that column height code without any compatibility problem with older browsers? I’ve tested several now.
No you can’t :slight_smile:

You are worrying about some little hacks that in reality are never going to be an issue (apart from the issues with yours I mentioned) yet you are going to create a layout that will ultimately break for everyone.

You must build a robust layout from the start and keep saying to yourself “What if?”

What if I add more text at a later date?

What if the user resizes the text?

What if …?

The only use for a fixed height site is for maybe a one-column graphical site that you want centered in the viewport or perhaps for a site that has very little text content. For all other sites you want the content to be allowed to grow.

If your site falls into this category then you may get away with a fixed height site but as you have three columns already then I very much doubt it. If you want to keep a fixed height then make the wrapper a fixed height and set the overflow to auto so the whole page scrolls. Then you can set the columns to a fluid height. This is not an approach I like or would recommend though :slight_smile:

Let your content dictate your layout and not the other way around. Keep things fluid and allow for expansion.

Hope that makes sense as it’s important to understand what happens next. Always think ahead and you can see the problems before they arise.

I should explain a little better:

I’m not trying to write anything for IE9, what I meant is that I read that there could be problems with using * hacks (which I try to avoid). I was just telling that I don’t want any workaround code that may not work well with IE9.

In my specific case even if the user makes their text bigger I won’t have any problems, because it’s for a photo gallery, I will only have a 1 or 2 lines subtitle below each image (with plenty of space even if the user decided to increase by 1.5x or 2x my default font size)
The columns are 2 banners, the header an image, and the footer may not be necessary, still thinking about it.

I will remove the float from the header, didn’t thought about that.

Hope my specs are clearer now, this is a very specific and simple design, that is why I wanted to keep it as simple as possible. I have others that are fluid, some use faux columns, but this one is mainly just graphics, less than 25 words of centered text.

Thank you for all your replies.

The * html hack (star selector hack) only applies to ie7 and under. It wont affect IE9 in the slightest and doesn’t affect ie7 or 8 either so is 100% safe to use to target IE6 until the end of time:).

I was just telling that I don’t want any workaround code that may not work well with IE9.

Yes that’s quite correct and basically the same as what I was saying.:slight_smile: Don’t give anything to IE9 and exclude it from your conditional comments along with ie8 (and even IE7).

In my specific case even if the user makes their text bigger I won’t have any problems, because it’s for a photo gallery, I will only have a 1 or 2 lines subtitle below each image (with plenty of space even if the user decided to increase by 1.5x or 2x my default font size)
The columns are 2 banners, the header an image, and the footer may not be necessary, still thinking about it.

If you are sure that this will always be the case then it may be suitable for you. If its mainly photos and captions you can probably get away with fixing the height. (However, experience, tells me that nothing ever stays the same so I always try to cater for every eventuality from the start. If it’s your site and you are in control then you should be ok.)

Hope my specs are clearer now, this is a very specific and simple design, that is why I wanted to keep it as simple as possible. I have others that are fluid, some use faux columns, but this one is mainly just graphics, less than 25 words of centered text.

Thank you for all your replies.

Ok - I think you should be ok then :slight_smile:

I didn’t mean to put you off but I just like to point out the pitfalls of certain methods. However, once you understand them then you can make your own decision as ultimately the decision is yours.

The code you have at present should suit your purposes and there are no needs for any hacks at all so all browsers will get the same result.

Here is the very simple website where I’m using the code: entrevous (.com)
It’s just a place where I place banners for my favorites charities and organizations.

I removed the float on the header, and removed the IE conditional comments in case this is so simple that works without the zoom trick. But if it’s necessary I will use lt IE8, correct?

I’m using a clearfix for the

<br />
instead of a blank div, but I read that this last one may be a better choice. I’m just used to use
<br>
on old html pages, but maybe it’s not the best choice nowadays, still learning some of the best practices with xhtml.
If I remove them altogether the design still holds, but I don’t know if in any browser…

The xhtml and css both validated.

I tested in IE6, looks great. Can you suggest any changes?