Everything is changing. This weekend, I read a very interesting book: "Everything You Know About CSS is Wrong". The book illustrates how, now that IE has passed the ACID 2 test, we can finally begin to build our websites the proper ways. Up until now, we've been forced to implement hacks to form the perfect layout - absolute positioning, precarious floats, etc. But that's all beginning to change! I'll show you how in twenty minutes.
CSS tables are so much easier to use that it's worth adopting them as soon as you possibly can.
-Kevin Yank
This tutorial will show you how you'll be building your layouts in the future. Actually, you should be using these methods right now! Rather than relying on floats and absolute positioning to build our layouts, we'll instead focus on utilizing css tables.
Step 1: Creating A Two-Column Layout the Current Way
Knowing that IE7 and below do not recognize the CSS table properties, we first need to build our incredibly simple site the "old" way. Paste in the following code into your "index.html" file.
<body>
<div id="wrap">
<div id="header">
<h1> My Header</h1>
</div><!--end header-->
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent"> -- dummy text-- </div>
</div><!--end main-->
<div id="footer">
<h1>My Footer</h1>
</div><!--end footer -->
</div><!--end wrap-->
</body>
There isn't too much that we need to go over. We've created the content for our two column layout. The navigation (#nav) will be floated to the left of the main content (#primaryContent). Let's go ahead and add some quick styling. I'm going to use background colors (ugly ones too!) so that you can easily determine where each div begins and ends.
Step 2: Adding the CSS
/* Just resetting a few elements */
h1, ul, li {
margin: 0; padding: 0; list-style: none;
}
p {
margin: 0; padding: .5em 0;
}
/* Main content styling */
#wrap {
width: 800px;
margin: auto;
}
#header, #footer {
background: red;
}
#nav {
background: gray;
width: 150px;
float: left;
}
#primaryContent {
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
We've set a width to our sidebar (#nav) of 150px and have floated it to the left. Rather than floating the primaryContent section as well, it would be better to simply add a left margin that is equal to the width of our sidebar. We'll also add a bit of padding to push the text away from the edges of the div.
#primaryContent {
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
You should end up with something similar to this:
Immediately (after the glare from those awful colors goes away) you'll see that the gray background in the sidebar isn't stretching to the bottom. This is because floated elements only take up as much space as is necessary.
One solution would be to hard-code a specific height, but this is a bad idea. What if the main content changes? You'll have to go back into your CSS file to adjust the height value again. So don't do that! Instead, the accepted solution is to create a background image and tile it vertically. This is referred to as creating faux columns" Simply move to Photoshop, create a 800x10 pixel canvas, and insert the appropriate colors. You know that the sidebar has a gray background and is 150 pixels wide, so simply use the marquee tool to the select that area, and fill it with gray. After you do the same for the awful yellow, you'll end up with this:
Save it into the root of your solution and call it "bg.png". We can now vertically tile this image, thus creating faux columns.
#main {
background: url(../bg.png) repeat-y;
}
Now, we've successfully created the illusion of equal columns.
Step 3: The New Way
So that wasn't all together too difficult! But it still required too much time to create something as simple as a two column layout. We even had to go into Photoshop to complete the look! This time, let's recreate the site using CSS tables. Don't worry, very little needs to change!
Keep reminding yourself, IE7 and below don't recognize CSS tables. So, at least for now, we still need to use the method that we performed above. Create a new stylesheet and call it "ie.css". Then copy and paste all of the CSS that we've written into this file. Now don't delete it from "default.css". We'll simply remove a few styles. We won't be implementing any hacks or floats to create our columns this time.
Remove the following styles from your "default.css" stylesheet.
/* Because we'll be using a "table" layout, we won't need to tile a background image! */
#main {
background: url(../bg.png) repeat-y;
}
/* No floats! */
#nav {
float: left;
}
/* No floats = no left margin. */
#primaryContent {
margin-left: 150px;
}
Implementing the CSS Tables
Now that you've removed the unnecessary styles, let's add some new ones! First, we need to create two columns within our "main" div: one for the navigation, and the other for the primary content. Let's set the display type of #main to be a table.
#main {
display: table;
}
Next, we should declare the #nav and #primaryContent elements to be table cells.
#nav, #primiaryContent {
display: table-cell;
}
Believe it or not, that's all that we need to do to create our column layout. We already set the width of the navigation to be 150px wide. The primaryContent div will simply fill the remaining space. Here is a snapshot of our layout using CSS tables.
It looks exactly the same! But we didn't use any floats or absolute positioning! However, as I said before, if we now view our site in IE, we'll see.
Though IE8 will display the site correctly, IE7 and below will not. To compensate, we need to include a conditional stylesheet. (That's why we saved the CSS from our original layout and placed it into "ie.css").
<!--[if lte IE 7]> <link href="css/ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Now, all is well! Modern browsers will render the site using CSS tables, and IE will use the traditional float method.
The True Power
The true power comes into play when we make modifications. For example, let's imagine that, down the road, we decide to add a third column to our site. We can accomplish this in about thirty seconds.
Step 1: Add the Additional Markup
After the closing tag on the primaryContent div, add your new column.
.... </div><!--end primaryContent--> <div id="secondaryContent"> -- dummy text -- </div> ...
Step 2: CSS
Access your stylesheet and set the display property of secondaryContent to "table-cell". You'll also need to determine how wide it should be. In this case, I chose 90px.
#secondaryContent {
width: 90px;
display: table-cell;
background: orange;
}
That's it. No floats, no zeroing out margins, no browser inconsistencies.
You should start using this method today! The IE devs finally listened and gave us the tools that we need to build sites the way we want to build them. So, we must utilize these tools - even if it requires a bit more work for a couple of years. If you start today, you'll be ahead of the pack!
-
Everything You Know About CSS is Wrong
If you'd like to learn more about css tables, and other CSS 3 tricks, I highly recommend that you purchase Rachel and Kevin's book. It can be read in a day.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Nick December 3rd
Cool, but man, if IE7 and some other browsers don’t work with this, there is pretty much NO point in using it, until IE7 is at the same status IE6 is (i.e. most people are not even coding for it anymore).
h-a-r-v December 3rd
I usually don’t read webdev books, but I made an exception for this one, read two weeks ago and I don’t regret the hour spent on it. It presents a bright future a webdev as myself is looking forward to see.
Shane December 3rd
Things are certainly improving in the world of CSS/browser support - thanks for posting.
Gavin December 3rd
This is of course irrelevent because people still use IE6 and IE7! Then you have two sets of CSS you have to look after!
chris simpson December 3rd
im scared…
can you really imagine a world where you don’t hate IE?
Really?
it will be years and years before people even stop using IE6, so for them to update to a standards complient browser will be a fair way off yet… great book and article
insic December 3rd
glad to know this stuff. great article.
Mike December 3rd
It’s a nice idea but, judging by how slowly IE6 users have adopted IE7 it will literally be years before IE8 takes over. So we would have to build two versions of every site, one for IE7 users and one for everyone else, and charge clients accordingly. I’m sure they will love that.
It will be fun (and frustrating) to play with CSS tables but not really practical for commercial sites.
duellsy December 3rd
agree with Nick… as awesome as it is, if there needs to be fixes to cater for the current version of IE… that to me equals fail (for now anyway).
We still support IE6 at work which is why we aim to have as few ‘fixes’ as possible, and no cross browser fixes at all for current versions of browsers.
Cito December 3rd
It is not a revolution… I would rather to hear that IE6 had beed destroyed by Aliens and I must not compete with it any more. There are a lot of methods delivered to us by new CSS 3 standard, but until all of modern browsers support them there is nothing to say about…
Jayphen December 3rd
This does indeed depict a bright future ahead, but along with other articles & books advocating a similar approach of developing for standards-compliant browsers & then creating an alternate stylesheet for IE6/IE7, it is rarely suited to a professional environment. I will be doing this for my own personal projects & for intranet pages that I know will be viewed in Firefox, but for clients it’s just not really possible yet.
h-a-r-v December 3rd
#1 Nick: WRONG.
1) Most people ARE coding for IE6. Maybe some of your friend’s with their blogs don’t, but all the business sites simply have to be cross-browser to reach everyone. IE6 has still 20% of the world market, while IE7 has another 27% (according to W3 browser stats). That differs in various countries of course, but in overall you can’t just ignore 1/5 of people when you run a business site or a portal, or a web 2.0 service, whatever.
2) IE7 is going out of market faster than you think. Windows 7’s coming soon with great impact and ACID2 passing IE8 on board.
2-3 years and you won’t mention IE6/7 name anymore. Until then..
You can make your site fully CSS2 compliant, hack-free and future-ready at last with css tables flexible and logical grid while using standard tables for IE6/IE7 users instead, IF YOU CAN’T CONVERT THEM INTO THE BOX MODEL VIA CONDITIONAL COMMENTS (as the book suggests).
“Ze eVuL TableSss? Nooooo! Nevah! YOU’re such a n00b even thinking of using zem, you haven’t r34d on teh internetz ze’re eVuL? ” - you say.
Well..
1) Semantics problem: tables were meant to present tabular data, not design.
2) Accessibility problem: tables are not screen readers (blind people) friendly.
Apparently, the box model seemed to solve both issues in a cross-browser way (no wonder it gainded such popularity), WHICH DOESN’T CHANGE THE FACT that floats were not meant to be used as layout bricks just as tables weren’t meant to be used as layout grids. Display: table-cell property was in the end.
That’s why “All you know about css is wrong”.
Now, to prove why using standard tables for IE6/7 instead is ok: (again: IF YOU CAN’T CONVERT THEM INTO THE BOX MODEL VIA CONDITIONAL COMMENTS as the book suggests)
ad. 1) The semantics problem: That’s right. But.. Semantics are false idealism in today’s bad browsers reality. Otherwise go shout at Google for using dangerous and xhtml-cut-off IFRAMEs / EMBEDDED (not OBJECTs) and zero-accessibility-care Ajax. You think why they’re using both? ‘Cause it works! And that’s how you do it in this business. For what sake should they abandon that? What would they gain? Nothing, but some respect from semantics psychofans and a big loss in the market (i’m talking iframe mostly - maps, ads, etc.).
ad. 2) The accessibility problem: Unfortunatelly there are no serious and complete blind people browser stats. At least I haven’t seen any in past 10 years I’m in the business. We may only assume that because of their dissability they are much more aware of the browsers market and choose alternative browsers like Firefox and Opera more likely than an average PC user. I hate to say that but the rest, IF THERE’S NO OTHER OPTION (box model) will have to deal with the non-well-linearizing site UNTIL they upgrade. Hey, in the end they’re internet users just as me and you - if they use a 7 year old browser or refuse to make high-priority update that’s their problem. Sorry.
Soon I’ll be taking a big portal I’ve made into another level (next version) and I’ll use display: table-cell along with normal tables for IE6/IE7 for sure. Alternative box model will be impossible for such a big and complex structure, especially that there’s an advertisement model requiring layout partial / inner horizontal fluidity - impossible in IE6 without tables usage.
In next 2-3 years you’ll use it anyway so if you’re making a long-term project (not likely to change the whole code withing next few years or more) then READ THE BOOK, or if you know the issue well enough, just do the right thing.
Stop using “the great box model hack”.
h-a-r-v December 3rd
Cito: Yeah, the CSS3 “abc” model looks promising but that’s a distant future ahead.
James December 3rd
The book itself is probably not worth spending any money on - the title is misleading and they’ve only named it in that way to generate maximum sales. - Nothing wrong with this but like I said it’s misleading and takes advantage of the lack of confidence in newcomers to CSS/HTML. Plus there are no real benefits associated with using the methods demonstrated in this book. It’ll probably just take longer because, as you’ve suggested, one will have to create two versions of every layout!
They should’ve named the book, “Introduction to CSS tables”…
h-a-r-v December 3rd
“It’ll probably just take longer because, as you’ve suggested, one will have to create two versions of every layout!”
Or just browser-detect and replace proper DIVs with proper TABLEs/ TRs / TDs.
John December 3rd
Basically wanting to say “Ditto”. Sure, good information if you’re calendar says 2012.
Jeffrey Way December 3rd
Hey everyone.
I’m shocked to read some of your comments.
I understand that this may not be practical for huge business applications. But for smaller projects, you should be using this method. If not now - then definitely in the next year or so.
@James - No real benefits? Are you kidding? I can’t believe you would say such a thing.
I do agree that, to some extent, the book’s title is meant to get people interested. But, if you’re not building sites using css tables in 2010……
Kevin Quillen December 3rd
CSS Tables? That’s a joke right?
“Or just browser-detect and replace proper DIVs with proper TABLEs/ TRs / TDs.”
If that’s sarcasm, I love it.
tom December 3rd
my opinion… people will use ie6 and ie7 as long as the pages they use are developed for them. ie6 isnt going any where for a while and neither is ie7 because the people using them dont know any better. if the pages were to stop working because of their browser they would fix their browser. and just because there is a new windows doesnt mean that people will switch to ie8 any faster then they did to ie7 from 6…. so keep making your pages ie6 friendly for a while it isnt going anywhere fast
Jeffrey Way December 3rd
I can only assume that the readers who seem ambivalent simply haven’t played around with this new feature.
Do you realize how much this will speed up you your development time? Maybe not now, sure. It’ll actually increase because you have to create an additional stylesheet for IE7 and below. (For smaller projects, this is hardly a big deal.) But in a couple of years, it’ll save you sooooo much time.
yo December 3rd
So in fact, to stay compatible with the world, I’ve got to
* forget everything I know
* then Remember everything I know
It’s double task:
* one stylesheet with css-tables
* one traditional stylesheet for IE6-7 ( just 75% of overall navigators
So what’s the point of your article?
* Hey Hey, forget everything you know ‘coz i’ve discovered an old css property, and now conditional is the rule!
Conditional stylesheets are pain in the ass for large, complex website, that most developpers rather find other solutions insted of making conditional stylesheets
Lubes December 3rd
Look, its great that IE has finally caught up with the rest of the world — but their primary users have not.
I’ve stopped caring about IE6, unless I have to for a very good reason to care, but to think that IE8 is the dawn of some Golden Age for web design will only lead to disappointment as the user base will not be an IE8 majority until probably years from now — and years from now, who knows what CSS features are going to available to us that we will still NOT be able to implement fully without setting up separate style sheets for IE.
The browser wars, and IE’s 5 year stagnation hurt us a lot more than we realize, as it will continue to make things harder for years to come, I predict.
Screw this all, I’m going over to all-Flash
Lubes December 3rd
Oh and just as another note so I don’t sound like a miserable bitch as much — for personal and other appropriate projects, this all actually great.
I just wish it were the case across the board.
CSS tables is yay!
Craigsnedeker December 3rd
Wow, that’s great!!!!! I might use this!
h-a-r-v December 3rd
Kevin Quillen: Indeed, I am a sarcasm and black humor fan, irony as well, but not in this case - see my pretty long comment above? Learn what I mean and then we may discuss.
I’m an old-school designer who started before CSS1 was even there and I know all the benefits of table layout grid that box model simply can’t provide.
>> If for some reason it’s impossible to provide alternative stylesheet converting table-cell divs to floats <<, then I see no problem in using standard tables instead for IE6/7 users whose amount will start to decrease after IE8 and/or Windows 7 is released.
2-3 years from now there’ll be no one viewing your page using IE6/7 and you’ll be happy with your CSS2 compliant code without having to rewrite anything if ’cause you’ve already done it before (present time).
But before you reply, please, read the long comment of mine above, especially if you’re “born” in box model times.
Zarathustra December 3rd
Well what did they have to term them “tables” for ffs? Reminds me of the Java/Javascript debacle! “They are both tables, but don’t worry…ones a table the other one’s a table but not the same thing”.
“Grid” is a word too you know!
Anyway, once I heard those magic words “not supported in IE7″ I filed it under the “worry about it in a year and a half part of my brain”.
Javier Centeno December 3rd
Note to self: Come back to read this tutorial in 2011.
ryan j December 3rd
The only difference between css tables and the much-maligned layout tables is that the table structure will live in your CSS file, muddying up the relationship between style and content all over again.
it’s on a par with calling a class .blue_bold_text when it comes to completely missing the point.
personally i can’t wait to see people using inline-css-layout-tables. that will be the day i turn the pc off and pursue my dream to be rolled naked through broken glass, as it’ll irritate me less than the internet.
David P Crawford December 3rd
How much is sitepoint paying you guys to feature their book?
icomir December 3rd
Hey don`t you think that is way we get paid so much, if it was that easy everyone will do it. I can not imagine not fighting IE. It will take me a hell less time to maintain or create something and that means that somebody else will be doing noting therefore earning no money.
We should stop this before it even starts
Jeffrey Way December 3rd
What if no one jumped on the standards band-wagon because they knew that they’d have to create an additional stylesheet?
What if no one used Javascript because they’d also have to compensate for when it was turned off?
–
Though I agree that this may not be practical for anything more than personal and small sites for the next year or so, it’s still something that we should be reviewing!
–
By the way, there is a big difference between using CSS tables and HTML tables. HTML tables describe what the content is. If you’re using HTML tables for layout purposes, there can be many fallbacks - including a possible search engine hit.
CSS tables refer to how an element should look on the page. Very different.
Jeffrey Way December 3rd
@David - They’re paying us nothing. This article is about the concepts explained in the book. It’s not a review.
ryan j December 3rd
then css tables are not tables at all.
Mark Priestap December 3rd
I’m excited about the possibility of using this. The only question I have is related to the ordering of content. For example, if you need to have your center column above your left column in the HTML for SEO reasons, how would CSS tables treat that? Any insights would be apprecitated.
Jeff December 3rd
Wow, I am going to have to do some research on weather or not this is actually supposed to be used this way. My understanding of the CSS table model, was that it was an alternet to the box model to be used for tabular data, as a replacement for html tables specifically for screen readers. Doing this almost seem to me like saying we may as well go back to html table layouts.
I believe that this is why Microsoft decided to leave the support of this out in IE 6, 7. That the floats, and other positioning elements are supposed to be used for positioning.
Anyway, I could be wrong. This was just my understanding of the CSS table model initially.
Jeffrey Way December 3rd
@Jeff -
No that’s not right. Why would you not use HTML tables if you were displaying tabular data? That is exactly what they’re for.
When using CSS tables, we’re not changing our semantic markup. We’re not sending false information to screen readers. We’re only speaking about the visuals.
Keep in mind that you using floats and absolute positioning to create your layouts is somewhat of a hack. It’s not what they were initially intended to do.
h-a-r-v December 3rd
Mark Priestap: it’s in the book.
1) Columns order doesn’t really affect SEO at all or in a super little percent. - I felt that’s worth mentioning first. There was a research on that. I’d say it’s more important for screen readers but not even that, in fact.
2) display: table-header-group / -row-group / -footer-group solve the issue, if it matters to you.
James December 3rd
@Jeffrey, that “no real benefits” comment was a bit off mark. I don’t think I really meant it in that way. Sorry. I agree with you on the potential usefulness of the demonstrated methods but I have to say I’m against books like this, maybe it’s the title, maybe it’s the fact that it’s a Sitepoint book; I don’t know…
I guess my anger is compensating for the fact that I won’t be able to use these methods for another two/three years. As people have said older browsers still make up a relatively large proportion of used browsers so until such a time when this isn’t true, using CSS tables will probably end up slowing development down - maintaining multiple versions of sites (especially if only to cater for browser differences) will become a nightmare.
I agree with you on the fact that we need to keep the industry moving forward instead of immediately dismissing new and original ideas - In this out of all the industries of the world innovation is imperative!
h-a-r-v December 3rd
Jeff: as someone’s already mentioned it should be named as “css grid”, not “tables” - it brings the same behaviour but these are still divs intended to contain your design elements, not tabular data.
Alvaris Falcon December 3rd
Overall, I love the idea in this book and article, and it’s really cool. I can feel Jeffrey’s passion to share about something interesting for us.
Thanks for sharing from you all.
Jeff December 3rd
I know I am going to get flamed for this one, but on the whole IE6, IE7 debate. I feel that if your creating something large like a web based Line of business app, or SaaS. There is nothing wrong in telling people that they need to upgrade there browser, this might be because I come from a software design standpoint and we have always had system requirements. If I am developing an intranet or some app for a client. It is all about maintainability and ease of support. If it makes it easier There should be no problem in saying that they need to have the newest version of Firefox, opera, or even IE (but it is in beta now so I wouldn’t suggest that).
I would actually say, fact of matter is unless you give someone a reason to upgrade they wont. It also helps educating clients and end users.
That being said, if your developing the next amazon or ebay, were it is a come one come all use me, then I can see the issue, the don’t shop here unless you upgrade doesn’t really work.
But by all means if you developing somthing that is subscription based, or for a companies internal use. By all means make them upgrade. The rest of the web will end up loving you for it.
Anyway just my opinion.
Mark December 3rd
This is pretty interesting, but I’m still going to be developing with IE6 in mind. It’s mainly because many our of clients at work still want IE6-compatibility on their sites, especially the larger more well-known brands. Just think of a company like HP. Are they going to just stop supporting IE6 even though a new IE is out (or coming out)? Many people didn’t move to Vista, or downgraded from it to XP. XP comes with IE6 by default and many less computer-savvy people don’t know why IE6 is so bad.
It’s a pretty good idea to start to consider coding differently *when* and only when you’re no longer required to comply to IE6.
Mark Priestap December 3rd
Thanks h-a-r-v. That is helpful.
Jeffrey Way December 3rd
@h-a-r-v - You’re right. It really should be. It would cause much less confusion!
@James - I agree.
@Mark - Well in this scenario, you’d need to compensate for IE6 and IE7.
Though it would require more work, I’m merely stating that you can in fact use these methods today. You’ll just need to use conditional stylesheets - which most of use anyways.
–
Ultimately, whether you want to use these methods today or tomorrow - it doesn’t really matter. The article simply presents something that you should think about.
Jeff December 3rd
@h-a-r-v: Yes I see these still are divs, but they don’t need to be. I was just reading the CSS spec. And although they don’t truly specify there intended use (that I can tell). A CSS grid would have been a better implementation as grid are often considered as layout tools. However the CSS table model is a table complete with all of the borders, header, captions, footers, etc. that we see in the html tables. A layout grid would have only needed rows and columns. This is why i question what the actual intent of the spec really is.
An example would be how XAML handles grids (maybe not the best, but closer i think to a truer layout grid).
But in the end, I wasn’t really trying to argue, just that I had to go try to look up what the original intent of the spec actually is.
jason December 3rd
I am amazed at how much attention this is getting!! As for IE 6, I work for a LARGE school district in VA and ALL of our student/teacher computers have IE 6. That means any site not developed with at least some thought to IE 6 our students can’t use.
That being said this is a great article and something to think about. I can see this saving a lot of time in the future and I’ll try using it on some smaller projects, but i will also continue to develop for IE 6 & 7 along side of these “new” designs.
Robert December 3rd
So as of October IE7 commanded 26% of the market and IE6 20% according to W3. Until IE6 commands a much lower share I’d say ignoring it is a fools choice.
Jeff December 3rd
@Jason - Wow, my question is this. Are the sites that you develop intended for internal use only? Is the only thing holding you back the fact that student/teacher computers are running IE 6? Do you need IE (do you make use of active x controls)?
If designing this sites for the schools would be simpler, and easier to maintain if they had a different browser it should be able to sell the on upgrading. It’s should be all about ROI, ease of development an implementation. If the sites aren’t only internal, then scratch what I said. Or if they have stuff that requires IE (like active x).
I mean I guess this debate isn’t really on this topic of CSS table but more on the when to force end user to make a change. Fact of the matter is that at some point you need to force a change. Otherwise new technologies never get adopted. Flash is only prevalent know because some people decided hey this is cool, I am going to make the decision that people or going to have to install an add-on to browse my site. Now everybody has the flash player. No reason not to look at browsers in the same light.
Anthony Bruno December 3rd
Im actually a fan of this method. I would say that it would be beneficial to start doing stuff like this for best practice. I will also agree that it might not be the most efficient method due to IE support and what not.
With that said, developers should always be building with the future in mind while still supporting an older browser with graceful degradation.
Well done Jeffrey! I really enjoy reading your contributions to NETTUTS.
James Laws December 3rd
Let’s be honest. IE6 was released in 2001. It is going to be a long time before these browser versions disappear completely.
I actually wish all browsers would follow Google’s lead and push their updates to the user. At least then we would only have one browser per vendor and not half a dozen. Just my two cents.
GlobalHans December 3rd
Great article and will buy the book
would love to use some more “modern” ways of designing for modern browsers. For small sites it is doable to have double stylesheets. so i will go and experiment with my new site. We webdesigners have been fighting these crappy browsers for a long time and it is really nice to see a little light at the end of the tunnel.
As for the skeptics for small sites it doesn’t take much time to create 2 stylesheets i think. For larger sites maybe it is a bit to early but nice to experiment with so you are ready for the day that dealing with crappy browsers is over.
Steve December 3rd
What’s really crappy is that CSS layout tables weren’t included in CSS2 from the start.
Jeff December 3rd
@James - Very true, old browsers will be around for a while. Witch is why i like to try to force people to update, if it is possible. The Google push this is great. Any something I hope other browser really consider as well. Fact, of the matter is I believe that older version of safari, firefox, and opera will have problem rendering the css tables as well.
Nino December 3rd
Ok lets get this straight. You CANNOT get some people to update from IE6:
1.They don’t care
2.They think if it works its good enough
3.(The most popular one) They have NO idea what IE6 is, they just call it…the internet.
4.They’re forced to
We know about standards, browsers and how a website works…they just don’t care.
IE6 is not gonna die unless you have google to stop working for it with a huge florescent button saying CLICK ME.
Matias Niemela December 3rd
You are aware that you can automatically (without the margin-left property) set the right div to move itself to the side of the div.
#left { float:left; width:150px; }
#right { overflow:auto; padding:0 0.5em; }
#container { overflow:auto; } /* this makes sure that the div size adjusts to the float or the other element */
IE6 doesn’t like this, but you can always fix it by enabling hasLayout.
* html #right, * html #container { height:1px; overflow:visible; }
Sean December 3rd
1. Floats weren’t meant to position elements? Perhaps it wasn’t, but it works remarkably well. Computers weren’t meant to play games, but they do a great job at that also.
2. Display:table has one very annoying drawback. The table model completely ingores the position property. You want to absolutely position something inside a table cell, and you’re screwed.
3. You also CANNOT re-arrange the location of the columns. The table rows/columns will appear in the order they appear in the XHTML. That can be troublesome when source order matters, but you want something on the right side of the screen, or what have you.
Floats work just fine. Their not hard to understand.
It’s honestly not so hard to CSS a website in very short amount of time. And you don’t need to do weird background imagery like this post suggests, it’s not difficult to get faux-columns working.
mike December 3rd
I’m pretty baffled by the negativity in this thread, I see this as a great opportunity to be ahead of the learning curve. Tons of people are going to have the “screw it for the next couple years” attitude, so why not be ahead of the pack?
I rarely find sites that don’t use conditional stylesheets so I am pretty surprised that people would be throwing a fit about having to do one, since you probably already are anyhow.
I have to agree that the books title is a bit misleading but that’s basic marketing, and it clearly works because it seems to have received everyones attention.
And for those that think IE6 is dead and you don’t need to develop for it you are dead wrong, perhaps in some applications you can eliminate, but I personally know of companies that still use IE6 and they have strict policies about upgrading, they update company wide and they have rules/regulations on when to do it. There are plenty of people who still use it, who don’t know how “bad” it is because they aren’t web developers. And when 8 is released people are still going to use 6 and 7 because realistically not everyone upgrades right away. So developers are STILL going to have to develop for older browsers, which is most likely going to result in conditional stylesheets being used.
For me, like I said, I see this as a great opportunity to move ahead of the curve and learn something new that will without a doubt save hours of developing time in the future, yet everyone seems to only complain that it may cost them a couple hours today to make some changes to accommodate this new method. I don’t really get that….
Lubes December 3rd
Can everyone please just read Andy Clarke’s take on CSS tables, please?
http://forabeautifulweb.com/blog/about/are_css_tables_ready_for_prime_time/
@ Jeff, you said: “I know I am going to get flamed for this one, but on the whole IE6, IE7 debate. I feel that if your creating something large like a web based Line of business app, or SaaS. There is nothing wrong in telling people that they need to upgrade there browser”
YES EXACTLY!
People can’t upgrade if they don’t know they should for crying out loud! We’re so terrified to put in a little script that will prompt users to upgrade but huge websites like Hotmail do exactly this!
Jeffrey Way December 3rd
@Sean
In response to #2 - it definitely is a drawback. But I would hardly say that we’re screwed. If you wrap the set in a parent div, you can then set the positioning properly.
It adds an extra div - which isn’t ideal.
sean steezy December 3rd
well. after everyone cools down, I just want to say, I only code for the latest browsers. People should upgrade their stuff, it’s free after all.
I usually just put a little disclaimer, “This website will look stupid unless you have the latest version of Blah Blah and Blah. Download them here.”
Then you don’t have to worry if they have IE6 cuz you told them your site will look dumb with it and it becomes their problem.
easy.
Dice December 3rd
“2) IE7 is going out of market faster than you think. Windows 7’s coming soon with great impact and ACID2 passing IE8 on board.
2-3 years and you won’t mention IE6/7 name anymore. Until then..”
Vista has been out for almost 2 years and you don’t see IE6 disappearing all that fast. So that statement makes it invalid.
Nice tutorial, but I don’t think this is really practical.
Jeffrey Way December 3rd
Hey guys. I want to clarify one quick thing.
In no way am I suggesting that you should ignore IE6. That decision is entirely dependent upon your situation.
I’m actually suggesting that you implement these modern techniques, and then create an alternate stylesheet to make IE6 and IE7 happy.
Kevin May December 3rd
I think that anyone who is using anything below IE7 when IE8 comes out.. should just get a site with no css at all on it. Big pages of text, thats all they get.
Sean December 3rd
@Jeffrey
Granted, you could do that. But it’s less than ideal in a situation where you don’t have access to the markup. In a CMS I develop, I sometimes help the CSS coders to fix their template. But the XHTML is generated by the CMS, so we can’t go changing that around. I tried doing a table layout as a pet project, and it broke some stuff that I haven’t taken time to fix.
but my other points still stand. In my pet project, I couldnt throw the left column on the right real easily (or at all) like I can when everything is floated.
And I didn’t feel that it was much easier than floating everything anyways. Floats are so simple.
James December 3rd
@sean steezy, Is that because you can’t be bothered?
Chad December 3rd
Thanks for the article. I’m curious, where do all these web design blogs get their content (articles + beautiful pictures)??? I’m lost how each blog has unique articles with all these related pictures. I’ve tried Googling about this, got nothing much but generic article repo sites with no pictures.
mike December 3rd
@sean
I have to disagree with that completely, if you have clients that simply don’t care that is one thing, and they are losing potential visitors/customers as a result I’m sure, but to me that just sounds like the easy/lazy approach.
I would bet money if you had clients that were serious about their website being accessible you would get fired if their site looked like crap in a browser that is still used regularly.
Personally I don’t know of any developers who don’t test down to IE6, I’m sure there are plenty, but to me that is a very bad habit because even with IE8, people are still going to be using 6 & 7 which means that for at least a few more years people are going to have develop sites more multiple browser versions, I don’t see an end to that any time soon.
Brian K December 3rd
CSS Tables! I can see a huge benefit to this now and in the future. You people are nuts and are obviously stuck in a hole.
This is a wonderfully useful technology that will be featured in more books in the future because it will most likely simplify workflow.
How could you ignore saving time in the long run?
I don’t know about you, but Time=Money for me
If you will not consider this ‘method’ as a new technology than…. Leave the market now!
dfunkydog December 3rd
@nino
Maybe google should take you up on that, I’d like to see how fast ie6 would die if all the big websites including microsoft.com drop support for it.
sean steezy December 3rd
@james:
i wouldn’t freelance if I didn’t want to be bothered… it’s because I like the latest technology. I want to implement the latest technology on my websites. People who don’t update their browser prevent me from using the latest technology. They’re doing a dis-service to themselves and designers who want to make cool stuff cuz some dufus wants to disable scripts or something.
For that matter, if I were making something that needed to be accessible to everyone, then for sure I would make sure it’s at least compatible with the last browser version, or 2 versions back. I would not make a complex, high tech website compatible with an old browser. Those hours of coding are better spent elsewhere.
Geez, you could make a whole article about how much IE eats code and all the f–ed up stuff it does… standards. thats all i want…standards.
Jarod Taylor December 3rd
I spent 5 minutes reading the article.
I spent 30 minutes, with a bag of popcorn, reading the World War Web comments.
Good article. The reality of this is, use it if you want to and use it if you can, otherwise keep doing what you’re doing and keep all this in mind for future use.
Sean December 3rd
I reviewed this book a few weeks back on my blog.
Review: Everything You Know about CSS is Wrong.
Long story short, it’s overpriced and not practical.
Henry December 3rd
Great post, thank you
http://www.crea-t.net
Afe December 3rd
Wow, I’ve just started thinking about dropping support for IE6 and already I can see IE7 is going to be the next pain in the butt.
The CSS tables are pretty cool, and it would make my life a lot easier. What concerns me is that users will not adopt IE8 for another five years so we’ll be stuck doing conditional styles for another age. I really hope it’s only a couple of years as you say. I will experiment with this, but probably not adopt it just yet as the extra styling just creates more work.
Adam Hawkins December 3rd
I’ve also written about this on my blog (www.broadcastingadam.com), but using these techniques are so far away. It will most likely be 3-4 years before IE7 slowly moves away. By then hopefully CSS3 will be ready. Around and around we go!
Derek December 3rd
I ordered this book a few weeks back and was a little disappointed in it’s short length, but then again it really doesn’t need to be much longer.
I have the benefit of building a small app for my office where the majority of users are on the latest version of FireFox. I’ve been using the css table technique for my recent designs and it’s working out great!
Ben Carroll December 3rd
Hmmm yeah i’ll pass on this idea. I will continue to use what works and what i know. I have evolved beyond tables and no longer use them except for when i need to present data. I don’t care if the tables are css based or html based they don’t work for me 90% of the time.
As long as what I do looks the way I want in all browsers I am not changing. When browsers evolve I will.
secretmode December 3rd
Nothing is practical for now in this screencast. The solution creates extra problems which is not what anyone would recommend to try.
Jeff December 3rd
I still hold on to the stance ther is nothing worng with telling people they need to upgrade.
Anyway back on topic. I definitly like this, but I am still looking for information in the CSS spec that would point out that CSS Tables areintended for layout. Even if they work well, ther is no need for the headers, footers, and captions if the intent was layout. Those are all things traditionally used for tables the define tabular data.
Also, if the floats weren’t suppost to be used for positioning, what were they supposed to be used for. It seems to me the floating somthing to the right or left is exacly telling the item how to be positioned.
Also it seems kind of funny that if CSS tables were supposed to be used for positioning then the wouldn’t negate the position: attribute. I know you can overcome this, but adding extra divs just because is a workaround not somthing I suspect the authors of CSS intended.
Nick December 3rd
To some of the people who responded to my comment - I did not mean that nobody is coding for IE6 anymore, I just mean that it is debatable whether or not you should code for it or just tell the user they need to upgrade their browser.
That being said, maybe there should be some sort of web initiative that promotes ALL websites big and small to make a universal message for people on IE6. Right now, some sites will simply work with it, others will prompt you to get a new browser. It’d be nice if we all could decide on a way to go with this.
Also, I work at Geek Squad, and restore a lot of computers. Most XP recovery discs have IE6 on them. I know that if it wasn’t me doing the restore, the customer would just restore and stop, thinking IE6 was fine.
Meh.
Jeff December 3rd
@Nick - True about the XP restore. There are a lot of techs that want an update to the new browser to be in the criticle update list for this reason. AS for right now they just make the security update for whatever browser that is installed part of that list.
It would be great if there was something for older browsers like there is for HDTV. Hey people if you don’t correct your problem by this date don’t cry to us. That would be great, especially since there are security uses involved with using older browsers. Even if your using Firefox V1, or old Opera version.
Jarryd December 3rd
I personally would love to try to use this new way of creating website styles, but it will have to wait for smaller web sites, just because of the time it will take the understand the display attributes better and converting to them.
Nice to see such a large comment base!
Eneza December 3rd
I agree with James!!! Its more tedious to have another css file. About the title, its misleading and yes its totally for sales….. and there are still many users of IE6 and IE7 (IE6 sucks). It will be a matter of choice, the MAJORITY of users or IE8 users?
still the answer is FOR THE CLIENTS! hehehehehe
I like the comment more….. yay!
John Sanders December 3rd
Jeffery, thanks for the article.
I’m sure by the time you’re reading this comment you’re probably ready to shoot yourself in the head with these debates. However, keep something in mind. Not all IE6 users can upgrade. I worked for a very large telecom company, and when I left them in July 08, the standard browser was IE6 with practically no options to upgrade, nor was any other browser acceptable (Firefox, Opera, Safari). That’s over 1/4 million PC’s on IE6 from just one big company.
I like the idea of informing users that they’re using IE6 and offering links to upgrade, however that could be annoying if you’re a corporate user and you have no option to do so.
Ultimately, your approach will be dictated by your user base. There’s no right or wrong approach.
h-a-r-v December 3rd
Jeff: I’ve gone through the specs as well and I totally get your point, especially that they mention of using it as tables with tabular data in xml driven apps (no html tags). But ask yourself this:
1) What is the ‘display’ property of a div for? And what is a div for? - both for design purposes, of course. So it’s just another display property bringing particular behavior to divs - exact with normal tables (that’s why it’s called the same).
2) Who said that nowadays box model is the right way? No one but ourselves. There was a designer who found out it’s the best way at a time and everyone agreed. But is it in the specs? No. You won’t find me a single sentence from W3 that YOU SHOULD design using box model. What you’ll probably find is that you should do it in A VALID way (with newest markup) - that’s why they gave you a validator. You will also find that you should not use normal tables due to accessibility issues (screen readers confusion) + the fact that tables are intended to present tabular data only, which’s been out of speculation since the very beginning (what btw. affects search engines behavior in result).
3) Using table-cell display property:
a) does not any harm to screen readers
b) doesn’t harm your site in terms of SEO
c) passes all kinds of validation (including WCAG)
So.. Again, it’s up to us to decide whether this way is better just as we did years ago about the box model to replace html tables. With that decision we opened the door for another group of problems:
1) browsers imperfection in CSS2 interpretation which made us using tons of hacks ’til this day (not only IE.. Opera e.g. still doesn’t understand body background bottom property)
2) making design process harder and code bigger by replacing complete, logical and fluid grid with individual “puzzles” that needs to be placed and defined from zero one by one + bringing limitations (there are atleast few importan things you simply can’t do in box model no matter how hard you try).
That’s why css tables are revolutionary. They g