Getting your DIVs to behave like TABLEs
"Oh, the complexity of those multi-column layouts! It was so much easier with tables!" I hear you say. You'd be surprised at just how easy it can be to put together a multi-column layout with CSS2.1.
UPDATE: I've added a couple cross-browser options along with descriptions.
First, check out the example. If you don't see a nice three column layout then you're using IE. Stop it. Go download Firefox or check out Pixy's approach that'll work in IE5 and 6. This technique is for browsers that actually support the CSS spec.
If you took a look at the source then you've likely figured out how it works but I'll explain it anyways.
Setting up our HTML, we see a basic set of DIVs that we'll be using to define our columns.
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
To make DIVs behave like TABLEs, you have to tell them to behave that way using the display property. The three key values that we'll be using are table, table-row and table-cell.
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
Each element now behaves like it were part of a table. In doing so, it also inherits cell capabilities. Margins no longer apply and floating your cells can cause some unpredictable layouts (or get ignored altogether).
This works great in putting together a simple one row, multi-column layout. You can do multiple rows but with no way (that I know of) to do column spanning, your subsequent rows will have the same widths as the first row.
The next big thing to look out for is embedding elements inside the table container but outside any of the cell containers. Expect odd results. Firefox treats it as cell in the same row but Opera makes it a row onto its own but with the same width as the first cell.
You should be able to use the Pixy method with the * html hack for IE users to pull off a cross-browser multi-column layout.
Examples:
I was surprised by the comments indicating the lack of cross-browser support in my example was an issue. Even though I mentioned twice in the article the possible ability to combine it with another technique in order to make it cross-browser. Therefore, I've decided to put together two examples of cross-browser multi-column layouts. As it turns out, it's not always as easy as it looks. :-)
* html hack for IE, I float the left and middle columns to the left and then float the right column to the right. Although, technically, they can all be floated to the left. In the end, I'm not a huge fan of the Pixy method because the red and blue background colours are done using images on the container and row instead of on the actual columns themselves.
Conversation
As a new CSS devotee this is invaluable. I'm a designer not a code ape, and so normally pass a photoshopped "look" to a code simian for build.
That said I obviously need to understand how to code in CSS and it of course helps to give over designs that are workable even if I am not completing the build myself.
Tables were always my fudge (with a quick jump into ImageReady if I was under pressure), this will assist me greatly in my continuing journey to 'see the light'.
Thanks.
This is indeed a great trick to know, but it's important to only use it when necessary. Often times, you can achieve the effect you want without resorting to a table-like layout, which means that you don't need the hordes of extra DIVs for rows and columns. By all means, use this trick when you need it -- but first see if you can build your layout without all the extra DIVs!
Wonderful and all but this crap with standards needs to wake up and get real. IE still owns over 80% of the market, so it's not as easy as saying 'STOP IT.' At least you posted a link to an example that works in IE.
before i start...let me make it very clear that i do understand the rationale to use css layouts over table layouts (lighter page weights, save bandwidth, separation of presentation and content, etc). all good things, no question.
my problem comes in the implementation. when you have to say something like, "if you're using IE, stop it"...well that just isn't going to cut it. even with the US gov't now suggesting that people stop using IE, it's still the most predominantly used browser (we can argue that, but most sites that aren't visited exclusively by techies will show 70%, 80%, 90% etc IE usage).
i've seen anti-M$ people become enraged when presented with the "if Opera (or Firefox or Mozilla) make up only 5% of my audience, then I can't afford to code specifically for that". well, if that's true...how can anybody justify telling 70% or more of their audience to "stop it". many wouldn't even know how to download/install another browser (how many people (again, general public people) even know what Firefox or Mozilla are?).
so...
css...conceptually, great. all for it. implementation, not so much. doesn't matter who is 'non-standard'...the fact of the matter is I can't afford to alienate that much of my audience. unfortunately, i also don't have the resources (time) to jump through the hoops and hacks to make sure my css layout works in all browsers. not when I can bang it out in a table in 5 minutes.
remember, tables aren't non-standard...they're valid markup. HTML, XHTML...you can still separate presentation from content. it's not the 'ideal' solution (again, I understand the +'s of css)...but it's not illegal either :)
sorry...didn't mean to ramble.
I guess my "Stop it" joke wasn't as funny as I thought. :) However, I understand that IE still has the lion's share of the market and that's why I included the link to Pixy's technique. It should be possible to combine the two techniques to achieve the desired result.
for the record, i understood the context in which you meant it (the "stop it"), and yes, it was funny. so there :)
fyi, to date there is no css equivalent to col/rowspan
td valign="middle"
Enough said.
Scott
Seems to me, If it doesn't display in IE it's just not very useful.
Coding for standards is fine, but coding for real-world usability is what counts.
Nothing news, known for a long time, It was working already in CSS 2.0
I have written a lot about it in the past.
I tried your example, & it seems to work fine in Opera 7.52 for Linux, just as you say. Thanks. This will save me much time. It lowers the bar for those of us who wish to create standards compliant web pages.
I noticed that you used IDs instead of classes. I suppose that you're just picking something for the sake of clarity. However, I'd recommend using classes in your example, because the designer may want to add more rows. If you change them as I describe, & a designer uses your examples exactly as written & adds another row, then he won't have to find out through experience that he needs to uses classes instead of IDs.
Also, I'd recommend making the 'body' element the table. This way, you won't need that extra set of 'div' elements. 'body' could be displayed as "table", 'div' [with id="main" & class="row"] can be displayed as "table-row", while each column becomes 1 "table-cell". I'm *not* referring to your 2 fluid column examples.
I hope that makes sense.
What does everybody think? Questions? Comments?
Note that you have some redundant DIV elements. Especially since you don't need a DIV equivalent for every TABLE element.
Read the CSS specification about it and you will see that you can leave things out and still get the same result.
this completely cracks me up -- the result of "tables are evil" Dogma.
if you need what a table can do, USE A TABLE!!
it's quite easy to combine tables with CSS and good practices for slim code. ..speaking of which, you can't beat just "TD" for slim (no contest -vs- div id="left").
heck, use a table for layout if you need columns and rows. nothing beats a table yet for 100% liquid layout with aligned contents. it's unbeatable for consistent cross/back-browser results too.
(..note I said "a" table, though -- one 9-celled table covers all points of the compass in the browser.)
"If you don't see a nice three column layout then you're using IE. Stop it. Go download Firefox."
if I would have to tell that to 90% of my visitors, they would have by far chosen to not visit my site any longer.
10% of css-droolers would look at the marvels of a table completely rebuild with divs. If you need a table, use the table tags.
A Firefox Fan
As I see over and over again, people tell about the advantages using CSS instead of the good "old" HTML-Tags.
I cant see the advantage of having 10 different hacks for each browser in a CSS.
Also the time and traffic savings in replacing tables and clear gif with CSS is not very efficent, when I have to build a CSS which is 10 times the size of my other web-elements just to have the layout work in all browsers the same.
I think I stick to HTML4 until CSS is a REAL alternative.
Nevertheless this article was very enlightening for me.
A IE User
#1 Netscape gained momentum in the early days from websites posting that it was best viewed with Netscape and provided a nifty button linking directly to download Netscape. Early days = the days of Windows 3.1 (no old man jokes please...lol). So provide a Firefox button.
#2 People are not dumb. I hear too many complaints now that sites are underestimating what is now common knowledge and experience in Internet and computer use. People know how to install a program in Windows. besides, Firefix is the absolute easiest thing to install I ever saw, even the extensions and themes. ABSOLUTELY EASY! No whining!
#3 Phoke Microsoft and all the phoking zombies. YES! That means you too! The standards are made my consortiums of groups, including Microsoft. Then they say phoke everyone else, so I say phoke them and the horse they rode into town on.
#4 Microsoft and other companies won't change unless we help people put the pressure on them by taking their share of the market away. If you don't want to help then shut up, because you really have nothing constructive to add to this conversation.
#5 All of our customers now run Linux and the Linux browsers. Although Explorer runs on Linux, none of our customers use it. Perhaps 95% of our customers are ex-Microsoft users. 100% of those are 150% happy.
#6 Use tables if you like. I haven't used a table in coding for so many years! The advantage you have in CSS that does not exist in HTML is the replication of style with only one full reference to the style options. Maybe you don't need that. If so then you are making such a small site (perhaps 5 pages) or you don't mind typing.
#7 and last point. Do whatever you want. Use tables or use CSS div's. Suggest Firefox or let your visitors remain zombies. Make changes for the better or let your country and the world rot in hell. It is really your choice. Just stop your phoking whining.
Ah, I forgot to mention what I do and use. I own a computer company and I am a seasoned programmer. I was a heavy duty Microsoft programmer for a few years and switched to SuSE Linux (http://www.suse.com).
Currently my website production is tested first in Firefox and secondly in Konqueror. As an afterthought I check it in Netscape and lastly Explorer. I have had no real surprises so far.
Use VisiBone's (http://www.visibone.com) quick charts for HTML and CSS code and you'll have a color coded quick view of what is supported by Explorer and what is supported by Netscape and what is common to both. It also shows code that is W3 official, but not supported yet by either of these two browsers.
Don't be such whimps! Do a great job on EVERY website you design. If you really don't have time to code for more than Explorer then you need to quit using tables and switch to CSS. It will speed up your production dramatically and you'll have plenty of time to code for more than the narrow-experienced users of Explorer. You might actually increase your traffic by the return visits of the faithful users of other browsers.
Consider your market share on the Net. If you are programming for Explorer only users then you are competing with every other lame website out there. If you program for even two other browsers then you have opened the door to an area where you might more easily capture faithful clients.
Btw (most visitors know what that acronym means even if they don't know what an acronym is), the links above would be opened in a click with Firefox. However, with Explorer you have to copy and paste into another window, if you want to keep this site available. Firefox has the multiple tabs too with the one browser window, making it easier and cleaner to navigate and kep all your pages in front of you and visible. Consider this powerhouse browser. It is really light years ahead in customizing beyond Explorer will hope to be even in the next 5 years. Pray for the death of the power of the monopolists and the political manipulators, the people who only see violence and greed as the solution to society.
css still make me nuts, acting different in different browser. This article is helping me however
I cannot thank you enough. This tutorial, while short, has proven to provide me with extremely useful knowledge. Thank you =) .
Down with the tables!
I wish I could dump tables altogether and join the CSS "movement" that seems to be gathering momentum. The fact that Firefox supports CSS properly was enough to finally make me change.
However, I don't believe that CSS is ready yet. The obvious fact is that 80% of the browser market is hard to ignore, even if the browser that commands it is aeons out of date. The lesser-known fact is that even if a browser achieves full compliance, there are many things it cannot easily do that you can already do with tables and other "tag soup" solutions; you yourself freely admit that CSS does not support column/row spanning for divs with table behaviour, and elements with fixed positioning are hard to control when the window has to be scrolled horizontally. This doesn't look to me to be a problem of implementation, more a shortfall of the actual spec. Tables have supported fluid columnal layout for years, AND they work in every browser released in the past 5 years. So it's a no-brainer for most developers who have to build websites that work on the majority of browsers, right now.
Unfortunately, despite the myriad of websites I find happily consigning tables to the history books and preaching CSS-only layout, the simple fact of the matter is: CSS IS NOT READY - YET.
I can't wait until it is.
Hugo...
Don't speak about what you don't know by heart. I know both tables and css. Tables sux for layout.
Fluid columnal layout is fully possible to get to work in browsers as old as IE 5. Older simply show the text, and that old browsers don't need anything else. (imagine a computer with IE 4 - I had that 1995 on a computer which had 75 MHz)
Why would you need row, column spanning by using divs? Simply use tables what that is needed. I'm just sayin tables aren't for design. If you need a div that stretches over another div, u just set a width, and you're done.
Personally I don't use fixed layouts, because they are so stiff...
Scrolling an absolute div isn't "hard to control". They adjust for the content within.
Also I'm no fan of the table model with divs, mostly since we have tables for that, and I don't feel the need to mimic table layout, when you can do it much easier and more flexible with floats.
I also know both tables and CSS. I've been using CSS, mainly for formatting, since 1999. I'm not as proficient as you by a long shot, but I understand the principles.
Please don't get me wrong -- I do agree with you that using tables isn't ideal, and CSS *should* be able to replicate every behaviour currently possible with tables.
But the problem is still that CSS *CAN'T* yet replicate all the presentational behaviour of tables, not just because the spec needs more attributes (easy-to-code column height matching of divs would be a start) but also because not enough computers out there can make sense of it.
Look at the majority of major websites: eBay, IBM, BBC, Microsoft (unsurprisingly), EVEN THE MIGHTY GOOGLE -- ALL use tables for layout.
So as much as they might "sux", tables aren't going away just yet. This does not mean I like the situation -- it just IS the situation. :(
Hi again Hugo...
I actually still disagree on you main point: that CSS can't replicate all presentational behaviour of tables.
Sure, matching column heights would be nice, although you often don't need to. Simply use faux columns and then a margin-left or margin-right where the too-short div should have been. So far, except for one very advanced layout, I've been able to use these techniques without using Javascript. But does it matter? The user won't be able to recognize faux columns in use anyway. (using it on my own site)...
As for making all columns equal, this is the page for you: http://www.paulbellows.com/getsmart/balance_columns/
If you turn off JavaScript it simply doesn't go all the way down. Place a nice faux column there instead and you're set, even for users without JavaScript on - and let's face it - most IE users don't even know what it is and hence have it on.
The users to my site quite often have JS off, but then they are using FF. Comparing with another site of mine, aimed towards non-tech people, they always have JS on. (over 99% at least)
I do know many sites use tables, but that's not an argument for continuing to using them. At least not a valid argument: it's called authority argument... A reason I can think of, that they still use tables are the huge costs involved in switching. Doing work myself, and redoing a layout + coding for a non-table design is a large commitment! Instead, use CSS for new layouts, and use semantic markup always.
Tell me one thing tables can do, layoutwise, that CSS can't!
I just gotta add - snook.ca also uses faux columns:
http://www.snook.ca/_images/j/05/bodybg.gif
from
body { font-size:.75em; margin: 0; padding: 0; background: #333 url(05/bodybg.gif) repeat-y top left; }
it's the way to go if you want 'em down there.
:-O
I've never seen a BLOG get spammed before!!!!
No? It's quite common. How about answering my comment Hugo? ;)
OK Henrik, here we go :D
Faux columns using a repeating background image eh? Although it may sometimes work, including on this page, I consider it an ugly hack, worse than using tables, because you rely on an image to display the main structure of the page, not code. I thought one of the reasons behind CSS was to reduce the need for images for page styling? At least with tables, you're using nothing more than a few extra elements and CSS border styling to get your columns with virtually no images. You can make sure that each rectangular block is a certain height, and goes down as far as the column it parallels.
CSS styles tables too, so why eliminate them as layout tools "for the sake of it"? If, in all its glory, CSS can't produce matching columns without horrible hacks or javascript, what in heaven's name is wrong with just sticking in a 2/3 column table? It takes half the work to do and looks great, no javascript, no images.
Sometimes I get the feeling that avoiding using tables is done for dogmatic rather than logical reasons. http://www.paulbellows.com/getsmart/balance_columns/ confirms that suspicion for me -- why have an entire site demonstrating how to do with Javascript hacks what you can already do with a simple 3-column table? Why use images either?
I don't see any real difference between DIV and TD.
Hugo/Henrik: Firstly, my blog gets spammed on a semi-regular basis but I've managed to clean up anything in under 24 hours (depending on how busy I am) and usually only affects older articles (like this one).
To further address the idea of using DIV's vs. TABLE's is really more along the lines of semantics. A table is meant to describe tabular data and not to be used for layout. As a result of using DIV's instead of TABLE's, I have a greater potential to create a more accessible site no matter what user agent (eg: browser) a user may using.
The background image on this site is used to create a style for each column but without the background image, the content would still be in a column format just as if I had used a TABLE and not added any style. In addition, there is no javascript used on the site to achieve the column layout. As a result of using DIV's, I can reformat the look and feel of this site without ever having to change the HTML source and the code can still maintain it's meaning.
Hopefully, IE7 will come close to meeting the CSS2.1 and some of the CSS3 spec. At which point, most of this discussion will become less of an issue.
Let's hope you're right about IE7, although when launched, and if it's properly supporting CSS, we'll still have the discussion about backward compliance.
You pretty much said everything I would have said, but I'd like to make some comments none the less.
You're talking about page structure Hugo, and as far as I can understand, the page itself, has its own structure, its own markup as to define what type of element or object everything is.
In-line images on the other hand are supposed to be relevant to the content on the site, may it be a blog-post or anything else. CSS comes in as to separate the post iteself, with whatever information what it aims to convey, from the presentation - the layout. Hence, the CSS as a background image doesn't influence the content, as a table would do - a table doesn't add any new information or convey any new information to the user. Hence it shouldn't be used for layout - it should be used to present tabular data.
Add this comment to Jonathan's comment and you got quite a good reason to avoid tables.
//Henke
Thanks for the help jonathan, Your site is very nice and more importantly its informative, Thanks again.
I just wanted to say thank you for the this article and the examples. I am new to css and have been trying to figure out how to do something like this for the last 3 days. This did the trick to the T
Ive added ya to my bookmarks!
That tables should be only used for tabular data is a rather dogmatic point to make.
Site visitors almost always don't care about "semantics" (in the narrow sense discussed here)... they care about content and what they can do at the site. And even when they do care about semantics, tables need not detract from semantics. One can use the summary attribute and ensure the tables "linearize in a readable order" according to the W3C. Also, if one wants to show an "accessible" site, one could easily create a "text dump" or "basic html outline" version of their site pages for accessible viewing (e.g., "Click here for text only").
I think CSS for formatting is wonderful, but using CSS div's to fully replace tables for layout provides no real value-add. If all I should care about is reducing the data I'm sending to the browsers, replacing tables with div's only provides a marginal improvement. On top of this, whenever I as a programmer have to nest anything, it makes for increasingly unreadable code--at least the table/tr/td paradigm at a glance is very readable, usually with little or no surprises (esp. given that most browsers render tables exactly the same!).
What makes table-based layout so useful and predominant is that "thinking in tables" for the designer is very very straightforward. We have the legacy of the spreadsheet, I suppose, to thank for this. "Thinking semantically" in the CSS/div sense is unlikely to catch on as long as a simpler approach is available, and esp. because tables can be precisely formatted with CSS anyway.
While I am open to using div's for layout of some site features (esp. where the table paradigm seems like a major overkill), I reject the idea of throwing out what I know to already work nicely just because it's the current foo-foo way of doing it, esp. when almost nobody who visits my sites or pays me money will appreciate the effort.
Hello Steve, and sorry for the text formatting, Im currently abroad.
The last couple of months I have been upgrading a content management system along with its homepage. It was a terrible experience since it used tables. The code was totally unreadable with all its "pix.gif" images. It was a terrible headache to edit. Really bad that is. I came to the realisation that tables suck, even more than I had thought before!!! =) Cheers
Hi,
I really like the idea of using divs. However I cannot get my website to centre in Firefox. It always wants to cling to the left. Any ideas what I might be doing wrong?
Cheers
Rossmingo
Steve: div-based sites provide more benefits to the site developer than to the site user. From a site user's perspective, in the scope of the traditional user, they are unlikely to notice much difference except perhaps increased performance. Although, I agree that the increase is nominal if tables are used purely for larger layout issues and not unnecessary minor ones (like styling navigation or lists).
A DIV-based approach provides a more modular code design that allows for a much easier manipulation of page layout (as has been evidenced by the numerous redesigns of this very site). Each content component can be clearly demarcated by its container DIV making code much easier to navigate. Code depth becomes less of an issue as components rarely go much deeper than 2 or 3 levels.
Table-based layouts are only more intuitive for those that learned to develop that way to start off with (such as yourself, I imagine) and is actually a concept that I find most designers (especially those coming from a print background) simply don't grasp. Trust me, I've built numerous table-based sites using designs put together by designers who simply didn't understand the rows and columns of a table-based layout. I have pulled off more inventive designs using CSS than I have ever seen possible with tables.
Rossimingo: a link to an example page would be required to accurately troubleshoot your issue but the first thing to check is that your containing DIV has margin:auto; If so, it may be that other coding errors has thrown your document into quirks mode preventing the centering from occuring correctly.
not bad
Nice helps of tableless liquid layout. It helps me a lot. My thanks to the contributor(/s).
Tables are the standard and are not going away for a long long time.. 98% of the websites online use tables in their design.
That sounds like a standard set by the developers.. Get used to it.
As for CSS and tables. When working with multiple developers abroad CSS tables are a mess. Instead of looking at a single document you must reference several document to figure out what is going on with the design. To me that is inefficient.
Don't get me wrong.. CSS has it's uses. But having to use hacks to replicate the actions of tables is pointless especially when the whole ideamis to have a cross browser viewable website.
Anyways, I'll stick with tables. Never had an issue with cross compatibiliy because I inderstand what IE, Mozilla, Opera can and can't do. Plus this single page is over 56k. Geez why so huge for such a simple layout? and to make matters worse that doesn't even include the stylesheets referenced.
Blah, blah, blah
heheh, you're too funny! This single page is 56k because of all the content. the form, the comments, the article. Your comment alone probably added a kilobyte or so. The HTML itself is fairly minimal. However, page weight wouldn't really change much either way by switching to a table-based layout.
In any case, if you've developed for any length of time, you'd understand that developers used tables because CSS just simply didn't exist. So, yes, a large number of sites use tables...they had to. But technology progresses and new techniques are made possible. This is just one of those techniques.
Anyways, you read too much into this article. It's something in the CSS spec to learn about. I'd hate to think you're afraid to learn...
Oh, btw: I'd love to see you take this very page and make it a table-based layout. Let's see if you end up with a smaller file size. And next week when I tell you to redesign it, you let me know how long that'd take. In the meantime, I'll be making cash hand over fist doing new sites while you're busy doing maintenance work.
Cool, you'll be interested to know that i have made and improvement on the concept by using styles like:
.portlet-inner-row
100% width
.portlet-inner-col
20% width
.portlet-header-cell
20% width
the follwoing are appended to portlet-inner-col classed elements to set the coloumns and spannig of coloumns, the comlplete style sheet is at my site.
.span-two
50% width
.span-three
75% width
span-four
100% width
Also styles like
one-fifth,two-fifths,-three-fifths,etc
one-third, two-thirds
The concept I like is to create a coloumn on the left that is used for headers and sub notes (like what you see in textbooks), and a fat coloumn on the right for content.
You start with div class='portlet-inner-row'
then two div portlet-inner-col childnodes. The second coloumn needs to have a class that looks like portlet-inner-col.span-three.
Im probably not explaining it vbery well, that's not my strong area, if you look at my iste you'll see what I'm going on about.
Yeah, I see others are also trying to get across to people that websites are not foxtel or game menu screens, but rather that the webpage styling requires more direction towards book, magazine and newspaper layout techniques
At all costs avoid the tv or games approach unless you are providing the replicant in html form.
nuff said
Oh and the style sheet that I have created does emualte coloumn spanning, but not row spanning(yet?).
And...my style sheet works in at least ie 6
for a look a http://www.communitygroups.org.au
or
http://www.communitygroups.org.au/clients/ffc/
will show you that ie and firefox render this html/css nearly the same.
And if i remember what I was reading at quirksmode.org, it all comes down the right doctype.
yes/no?
general_REC: right own man. when
Henrik: The point of emulating tables, is that when done properly it will also degrade nicley to some sensibly comprehendable layout. vis csszengarden.com
yep this backgroun faux shit is bad. specially since this particular design(being great as it is) can be done with css.
the bad thing with tables is that for some reason a style created style wide for the page wont permeate through a table lement into its tr and td tags
so i dont want to use font tags, shudder.
If your hiring a designer who does not know anything about designing for paper, then your limiting the creative department.
Man computers have linked us together but people are transferring their zombie attitude towards tv onto computers and the internet.
How many designers you knwo are aware of how a real life page is laid out? I wouldn't bet it's many.
Maybe this is an avenue that a "web-designer" or a "web-coder"
should travel as a mandatory point int heir life before even touching a a computer.
That way you get a person-to-person feel of what accessibility and usability is all about.
But you better do it soon. Otherwise you'll be sitting around with an old man who recalls eating real food, little own holding nor reading a piece of paper made from a tree. Absolute heresy it would be.
Soylent Green comes to mind, when they both sit down to dinner with real food.
Microsoft's failiure to implement standards properly is having such a negative impact on CSS development it is driving me mad. However, is there really any point in developing for CSS compliant browsers at the moment because most end users are still using IE?
Here's a solution:
If you get a hard-on for CSS, by all means, stick with it and fu...er...promote it the best you can.
If you prefer tables, just like above, stick with 'em, BUT, learn to use CSS because eventually it WILL become the standard.
If you would rather hump a penguin skull than use either css or tables then just build your sites with Flash and say to hell with html! ^_-
I've been involved in web/graphic design for 5 years now and I have to admit, I hate using css for layouts. I prefer to do everything in an 'element' style. What I mean by that is I try not to stick with just one basic layout style. I may put my content and whatnot in tables, but I use css to style the actual content and as far as Flash goes I just use it for certain things like navs or banners 'n whatnot. I'm really not crazy about full flash sites anyways.
I'm learning more and more about the layout aspect of css, but, I gotta tell ya, it's a pain in the ass trying to keep up with all the cross-compatibility nonsense. As a designer/developer you're always trying to balance user-friendliness and not going bald (I've lost quite a bit of hair in my days and I'm only 26!!). It seems there are going to be problems with everything you try to do on the web (that's why I love print so much) so instead of trying to fix yourself in one way of doing things, just try and be knowledgable in the various ways of doing things.
The advantages there are you can keep doing what you know well and be prepared for the changes that are coming rather than adopting the whole "I'll deal with it when it gets here" mentality. In the end, it doesn't matter what your personal preference may be. We are designers/programmers/developers because we choose to be and when you choose to be in any profession there's always one constant: change. If you don't adapt, you get left behind. You don't have to love it, but you do have to learn it.
- S
OT: Love your site layout btw.
damn good layout
dio cane ceh figata!
i'll kill you!!
it's too much cool!!!!!!!
Very nice!
This is the most ridiculouly easy layout - works in both IE and FireFox and just wnated to take a moment and say damn - I wish I could do that.
I've always looked up to web standards as a very important factor when it comes to creating websites and it is a very bad approach because it hinders your performance as a webdeveloper constantly hearing about changes in web standards that you have to learn > master then implement into your site. The problem
is that the world wide web consortium pretty much bodged it up right from the word go and now they are slowly trying to patch up their wounds which i find fustrating. Why cant they just create one set of standards (Xhtml 1.1 + Css 2.1) then keep it like that and never change it i mean what was wrong with xhtml 1.1 that means they are going to bring out xhtml 2? also i bet xhtml 2 isnt any easier to use.
Its a nice idea - I've tried divs instead of tables several times but the frustration of losing consistency across browsers sends me back to tables every time. I guess tables have been around so long that browsers have converged in how they render them.
I test in this order: firefox, IE, netscape opera & sometimes lynx (to check it makes sense for accessability tools) - if I'm pushed just the first two (that shoud get 90+% of my audience).
I find if it works in firefox, the HTML is in reasonable shape & doesn't need much to work in the rest.
Thanks for posting the info - it keeps us all learning out here.
I have loaded the IE7 beta.
No joy on the CSS table usage.
IE sucks, install Ubuntu and live life without it and the crap that MS calls an OS. Oh, while on the subject, Vista will have a bunch of 3D desktop BS in it. All of this is already available in X with xgl.
its just what i needed! more power!
In my view, those who rubish the w3c standards because IE still holds the market are straight up weak coders.. I have not been in the pro game for long, but i realize the potential of the css over most other standard ways of coding.. so i say GO w3c do your best to standardize the net..
WOW..thanks ...was lost with DIVS and you totally showed the way out
Just use tables.
Just using tables isn't a bad idea but for too many web2-applications tables will simply make life much harder - for example this POST A COMMENT floating thing here - divs allow it to allign perfectly and look perfect - table would requrie a lot of extra adjustments and lots of work in-html adjustments so that if he wanted to change it's behaviour later he would have to modify the html again - that my friend is a bad approach - leave your data in one place and your scripts and styles in another place and u'll be thanking god when u'll want to change your site's look :)
Just one question:
I am using struts tags (display:table) the problem I am having is that when I adjust my browser size, it trunctes the left side of the table. ant ideas?
Thanks,
Ron
The example doesn't even work. o_O There's a convincing argument.
Saraistarr: which example doesn't work where?
I assumed that it wasn't supposed to look like this --- http://img215.imageshack.us/img215/334/cap0qx.jpg
oh, and I also didn't toally read the article... I see it now, sorry. But no, I won't stop using IE. =P
Huhuhu, Good look with IE then Saraistarr...
by the way, it is a nice design Jonathan, how did you make it cross-browser without lots and lots of hacks??
See ya.
Wow a very useful site. Thanks, it has helped clear up my understanding quite a bit.
Oh... this thing is awesome :D
I would love to use divs for my layout, but most times in the end it just isnt practical. Tables render the same in most all browsers, and even using them doesnt mean i have to stop using CSS!
I specify all of my cell properties in CSS, including dimensions, borders, and backgrounds. Why it is is better to use divs than table tags I dont know.
A great example is the fact that you cant center anything body level in CSS without adding a div to contain it that has a "text-align: center" property. This is a lot more code than simply adding "<table align=center>."
Not to mention my biggest complaint, which is that divs refuse to extend to the bottom of the page without being full of content, because CSS chooses to render the height of a div relative to the browser viewport instead of their parent container.
Oy, CSS is wierd. And I pity anyone who still uses IE after reading all of this.
"Not to mention my biggest complaint, which is that divs refuse to extend to the bottom of the page without being full of content"
ever heard of
overflow: auto;
???
btw, I've just installed IE7 Beta just to see what css support has been added/changed: im not very surprised that the http://www.snook.ca/technical/div_tables/ still renders wrong :D
also, they claim to have removed all the CSS hacks "available" in earlier versions which on one hand is nice and on the other sucks...
fortunately there's something called conditional comments lol (wtf cant they just make a proper css parser rather than bs-ing us with this)
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->
this way at least you can keep your IE hacks away from the normal CSS and don't worry about IE8. OMG you really think they'll fix all the craps ... i really doubt so
btw, for those who'd like some help with div layout check this out:
http://blog.html.it/layoutgala/
Tomas: Microsoft has said that
display:tablesupport will not be in IE7. We'll have to wait until v7.5 or 8 for that.thx ... but i dont really care, the only reason why i keep ie on my computer (yes there is a way to uninstall it despite what you might have heard) is to test my sites, but otherwise IE is a complete WOMBAT !!!
To the Author:
First, a huge THANK YOU! There are a lot of people who have posted comments here whom are very critical of your strategy and direction. But none of those people asked you to post this and none paid you, I'm safely assuming. This technique is now one of my most valuable structure tools in my CSS toolbox. Awesome!!
To Some of the Posters:
It's not right to go on developing non-standard, non-compliant websites just because M$ has set up the playing field that way. You have to think of things in the long-term. Many years from now who knows how we will be developing websites? But one thing seems very likely:M$ does not care about anything but M$. Certainly, you may think I am bashing but if you take the time to study, study, study IE 6 and 7 in relation to what the rest of the world is doing, and then try to develop a website yourself using the accepted standards, you will begin to go bald from hair pulling like most designers and developers.
The Internet is a community based upon honest majority. It is very unfortunate that M$ has cheated and upset this harmony by pumping their brower to mass users through Windows-system integration and automatic online updates. Firefox and Safari for example, hold true and honest user percentages because users actually download the software.
I have a unique situation that I'm not sure how to use divs to achieve the desired behavior.
I'm not sure if anyone here programs in .Net since they are very anti-M$. But I do program in .Net and I'm trying to use a Master page to make the addition of new pages very easy.
I want my master page to have layout with seven content areas
There would be left and right margin that would wrap the rest of the content.
In the space in the middle, there would be a top center column and then there would be a bottom center column.
In the space remaining in the middle, there would be a left center and right content area. Below is how you would use tables to draw it.
<table>
<tr>
<td rowspan="3"><asp:ContentPlaceHolder ID="LeftMargin" runat="server"></asp:ContentPlaceHolder></td>
<td colspan="3"><asp:ContentPlaceHolder ID="Top" runat="server"></asp:ContentPlaceHolder></td>
<td rowspan="3"><asp:ContentPlaceHolder ID="RightMargin" runat="server"></asp:ContentPlaceHolder></td>
</tr>
<tr>
<td><asp:ContentPlaceHolder ID="MiddleLeft" runat="server"></asp:ContentPlaceHolder></td>
<td><asp:ContentPlaceHolder ID="Middle" runat="server"></asp:ContentPlaceHolder></td>
<td><asp:ContentPlaceHolder ID="MiddleRight" runat="server"></asp:ContentPlaceHolder></td>
</tr>
<tr><td colspan="3"><asp:ContentPlaceHolder ID="Bottom" runat="server"></asp:ContentPlaceHolder></td></tr>
</table>
This table structure should allow flexbility in the widths of each particular content area.
Unfortunately 78% of my customers use IE so I have to consider them.
Is there a way to accomplish this using divs?
Thanks.
Interesting, but simply faking up table behaviour by using CSS, merely to avoid hard-coding the page with table markup, seems to defeat the purpose. What I want to find out is how to stack divs reliably side-by-side in the same way as table cells, *without* using table-row or table-cell CSS, so that in a narrow window they will degrade gracefully to being stacked vertically.
Peter: while it may seem that simply "duplicating" things with what appears to be a table-like approach is defeating the purpose, it's only half the picture. There's still the flexibility of later dropping the use of
display:tablefor alternative styles without needing to revise the entire HTML structure.As to your issue specifically, I don't know of any way without JavaScript to pull off what you're looking for. With JavaScript, you'd be able to calculate each 'cell' and ensure each had the proper height so items floated properly.
doesnt work in ie7
The reason to NOT use tables for layout is because the browser HAS to render the entire table at once.
So a 100 row table, cant start displaying until the 100th row is downloaded and displayed.
And with AJAX everywhere, you don't want to have to download a huge table just to update a single cell and then have to wait for the entire thing to download to display.
Tables are for tabular DATA not LAYOUT.
Jarrod: actually, tables can be set up to render progressively, as well. This only works if the browser knows the width of each column ahead of time (which was common during the heyday of fixed-width table-based layouts).
Can we expect an IE7 update of this? Cause it aint working in ie7 and since most people will use ie this should be fixed...
What the W3C need to do is issue and publicise a 'Designed for web' logo certification and force the UA's into compliance. Microsoft and others couldn't display the logo until they passed their product through a W3C certification process.
This isn't 'unfair' ... microsoft themselves use a similar system for windows logo certification for applications and required compatibility certification for driver signing.
Web sites could then choose to stick with CSS WITHOUT the IE hacks... simply by referring users with non-W3C 'designed for web' browsers to a W3C standard page explaining the logo, its meaning, its importance and listing all compatible browsers which have successfully passed certification. The customer then won't see it as a site problem but a browser problem... and one which is easily rectified by following the link to the W3C list of certified browsers.
Of course, before they do this the W3C really need to firm up their spec as regards EXACTLY how various situations should be handled (There is simply too much in the W3C spec that is open to interpretation) ... they should also work on the table problem a little more until they have something far more flexible than the legacy alternative.
Perhaps then we can put away all of the hacks for good.
Whilst it is fine to say that CSS is best and Tables are bad... There should be some red lights going off when you have to include hacks that are not formalised methods. If these hacks stopped working tomorrow in distinguishing some new browser release then HOW are you going to patch up that CSS code ? And if there IS a hack? well... then your pages just become an angry mass of kludges.
Sometimes the cure is worse than the disease, this is one of those times.
Whilst I think we all pretty much agree that CSS is a good thing... at least in that it is headed in the right direction for the right reasons... no SINGLE site can afford to alienate the IE market on a whim. This is why we MUST have the W3C step in, disambiguate the standards spec, and then force compliance by way of compliance testing and certification. It should be THEIR fight and not ours as individuals.
Till then, I cannot tell ANYONE not to use tables for layout. Use it for gods sake... if the DIV's just don't cut it then email the W3C... and make sure to point out that this isn't your sites job to battle for compliance, it is theirs. Pressure them...
Once W3C introduce such a certification then the problem becomes one for the customer... not just your site. Sites en-masse will start pointing at non-standard browsers and advising alternatives that are certified. Customers will start asking why 20% of the sites they visit are declaring their browser sub-standard rather than blaming your site.
That my freinds is the fix. Not the various hacks, but to keep the customers happy with sites that 'just work (tm)' using tables if need be... whilst pressuring W3C for a stronger specification and a recogniseable browser certification programme with logo.
In the meantime I shall continue to use tables for compatability purposes whilst retaining as much of the CSS as can be considered UA-safe. I'll prefer DIV's in circumstances where they can be assured to work. And I'll be the first to drop layout tables in favour of CSS when CSS becomes a reliable option.
-Gary
Nope. Chrome ain't diggin' it.
Div's instead of tables are a pain in the ass, and flaky.
And no where on the web is there anything like a "div structure validator" to tell you where you might be going wrong.
Что подарить девушке на 8-е марта?
>Div's instead of tables are a pain in the ass, and flaky.
I completely agree, esp. the disagreement between Dreamweaver's and browsers' rendering of div elements.
Thanks for the tutorial. It is really informative and useful. I ran into one problem though. When I try to add an img tag in the middle column before any text, the contents of the left and right columns will vertically align as if the image has been added on top of their contents.