CSS Layout Sucks for Panel-Based Web Apps

Welcome to the second in my ‘This Sucks’ series (for the first in the series, see Rails Development on Windows Sucks). Before you get to alarmed about me being a negative nancy, hopefully this will be the last in the series :)

The topic for this week is layout with CSS. I’ve only been a recent user of CSS. As a programmer, I’ve used Swing and AWT in the past, as well as Motif a long, long time ago. So I had come to take for granted the general approach that these libraries provide for building thick-client GUIs: you drop components into a container, specify layout constraints, and the container does the rest. Sure, it could get a bit tricky at times (I’m talking to you, GridBagLayout), but once you’d mastered the nuances of a particular layout manager, you could be reasonably confident about what you’d get.

So when I arrived at CSS, I figured that there’d be something similar. When it came to specifying fonts and colours, CSS felt quite natural. But layout was another issue entirely. As I grappled with floats, positioning, margins, padding and, above all, pixel-counting, I was left with a lingering feeling that surely I was missing something. It just seemed so hard – and that was even before I had to deal with cross-browser compatibility. Spending what felt like hours trying to get two boxes to align seemed like a massive step backwards from my days of thick-client layout managers. Surely, I thought, there must be a way to do this that is more akin to traditional layout management, as practiced by AWT, Swing, Motif, and every other Windowing system that ever existed?

So I sat down with various resources and pored over them: ‘Cascading Style Sheets: The Definitive Guide’, ‘Beginning CSS Web Development: From Novice to Professional’, w3Schools. But I still didn’t get it. Perhaps I just needed to understand floats better? Perhaps absolute positioning was the answer? Perhaps just using percentages instead of pixel counts would do the trick? Finally, I bought the well-recommended ‘Head First HTML with CSS & XHTML’, locked myself in a room and read through the chapters on CSS Layout. It’s an excellent book, but when I’d finished I realized that what I had been dreading all along was now true:

CSS Layout Really Sucks After All

The authors of this book demonstrated very clearly that with CSS’s layout mechanisms, even something as straightforward as a two-column layout is impossible to do correctly without at least some sort of trade-off. And that’s even before you have to count pixels. Web designers might be quite comfortable adding widths, margins and padding together to make sure everything fits, but whenever you want to add something or change a width, you’ve got to recalculate everything. Frankly, I thought that’s why computers were invented. So much for DRY.

So I began to wonder about GWT. It seemed to provide layout managers, yet it ran in the browser. How did it do this? I looked over the generated HTML for the various online demos and the truth dawned: it uses tables for layout! But that’s evil isn’t it? Aren’t tables expressly not to be used for this sort of thing? Well, maybe, but if the geniuses at Google are forced to use tables to achieve the ends that they want, what hope do the rest of us have without tables?

So I’ve come to the following conclusion: layout with CSS is all about document flow. It’s an inherently different model from the ‘put a panel here, put a panel there’ approach that windowing toolkits take. That’s fine, but if you want to build a web application that’s more like a traditional panel-based app, you’re going to be in a world of pain. The purists might say that we shouldn’t be building such apps for the browser in the first place, but frankly, we want to maximize the availability of our application and none of the rich-client frameworks (not even Flex) are yet ubiquitous-enough to achieve this.

Unfortunately, I’m not using Java so GWT would be a little tricky for me to use. There’s also a chance that it would overly constrain my look-and-feel. However, I’m going to be looking at using tables to achieve the layouts that I want. I won’t go nuts with them (like people have done in the past) – but I think the pendulum has swung too far against them. If tables are good enough for GWT, they’re good enough for me.

About Ben Teese

I'm a Senior Consultant at Shine Technologies. You can find me on Twitter and GitHub.
This entry was posted in UI. Bookmark the permalink.

9 Responses to CSS Layout Sucks for Panel-Based Web Apps

  1. Pingback: Thomas Lee » HTML Sucks for Rich Web Applications

  2. nickl says:

    As a long term user and fan of CSS, I’m going to have to disagree with you on some of your comments. When I first started using CSS, I remember it being incredibly frustrating to make a few simple designs work and look the same across multiple browsers. As time went by, I learnt a bunch of tricks and soon discovered that you can just about do anything visually with CSS. I guess its just ones of those things that you get better at the more you use it. I should point out though that you should almost never use absolute positioning or percentage dimensions. Those two techniques are responsible for many abominations. Using tables is fine, but it can really clutter your code when you start putting tables inside of tables inside of tables… Plus it makes it difficult to reuse page design elements if you use tables for page layouts. You shouldn’t really need to do pixel counting either; CSS layouts can usually be constructed with a bit of basic maths. I’ve never really found a great book on CSS, I find your best bet is to learn the basics, then describe your CSS problems to Google as they arise. You’ll find that just about every problem has already been solved.

  3. Peter says:

    Great article!
    That’s my conclusion too. Though thanks to css the days of font tags, nested tables, bloat inline styling and spacer gifs are gone, the table still seems to be the only “hack free” way to make equal height columns. The major argument against table layouts is that they hinders accessibility and do not linearize properly on cell phones. I have analyzed this claim backwards and forwards and it seems that tables if used properly and not nested do not impeded accessibility at all. If the designer does not have blind users in mind both divs and tables cells will create quite a mess. The solution to accessibility is special mark up, and in-page navigation. Tables provide a rudimentary in-page navigation by allowing the user to switch cells with a tab key, but a better solution is thing like: “skip links”, “go to content”, “go to links” etc. sprinkled throughout the page. If in-page navigation is provided, all distinction between tables and divs disappears entirely as far as the blind user is concerned. Divs provide a slightly better control over the order in which the block elements appear on a small screen, but most of the time, linearized tables actually either not half bad, or exactly what you want. And no one said you couldn’t combine divs with tables…

    All other CSS benefits apply equally to both divs and tables as long as they are formated with style-sheets and not with inline styling.

    Another issue with using pure CSS only, is the accessibility to the end user of the code. And buy end user I mean XHTML CSS illiterate, person who is hired on a temporary basis to do small content updates. As a designer I can not trust this person to properly format a font tag, let alone wrap content in divs and spans with appropriate classes and ids. Doing div only design will cause me a lot of grief, when I am woken up at the middle of the night to clean up the mess, or two months later when this mess REALLY accumulates.

    If going dumb can save you time, sweat and tears, than perhaps it is not so dumb after all.

    Cheers!

    • Maryam says:

      I also have a problem on my webiste littebugger(dot)co(dot)uk you see the menu bar floats’ as the screen size is changed. I have looked through my code and ccs style but can not see what tag changes the float option? same on my other site bed-bugs(dot)biz you see I have tree columns of div tags. the content, center div tag floats and distorts as you change the screen size. what is going on. i modified a template to get my web site. so i do not know how to change this.

  4. dp00 says:

    you are dead on here. i’m working on a grants management application for a research institution. we have lots of fields to align and in plain css this is nearly impossible. (it may be impossible)

    good article.

  5. Natan says:

    Layout with divs sucks men, in the 2001 i make my first webpage and as newbie user of Dreamweaver i only use divs to layout all the body of my pages.

    This, because I haven’t choice because I was starting and was the only way that I was going to see visually as it being my page, moreover, that only by moving the mouse and inserting some images could be a site in seconds, all of this without inserting a line of HTML code, but later i see things that could not do with divs or was more complicated to do.

    The divs do not replace tables, are not here for that, it’s even been created for that, I think you can get the same results using that tables or divs, but with divs is more difficult to control where to display text and if uses a class to define the width of each div, where the savings code?, instead optimize browsers to display tables and use tables correctly.

    If you are observer those who mostly use divs are designers and often are people with lack of experience in html, because is more easy to go to the option save for web and devices and save as html instead of coding, so thats is the divs revolution, the Adobes revolution.

  6. TimWiley says:

    RIGHT ON MAN!! RIGHT ON!

    Well first off i’m a programmer of various backgrounds and hobbies. About 5 yrs ago i sat down with Frontpage 2003 and hacked out using vb asp(limited java) a very comprehensive electronics store(ecommerce) selling 10000+ products… full featured checkout…https… session management… credit card processing… The longest part of this was getting the art/graphics to look right as i’m not very talented at this… so i hacked allot of existing things and in the end had the picture feel i wanted. Thru the process i learned for me that starting off in a paint/paintshop program and drawing my web-site first is the best approach for me before evening opening a html editor/wysiwig.

    NOW ONTO THE MEAT (TABLES/DIVS/CSS)… When i did this in 2003 i realized thru trial and error how to use tables to get the layout right with my graphic pics… Lots of trial and error in the beginning but after realizing a few things it became very easy to know how to approach table layouts/nest tables/best ways to align etc. Hacked all frontpage stuff out and tested on the most popular browers and in about 2 to 3 weeks of part-time work i had it done and it was very impressive for the time.

    Years go by and I’m in 12/2008. For the last 5yrs i’ve been doing project management, data warehouse backend etl coding, dba work and lots of other non-webby stuff).
    and now have a web-site project to do.

    First off it seems like the web wysiwyg tools have stepped back from what i work with… no more frontpage 2003… you now have microsoft expression with silverlight… adobe dreamweaver which was also around long ago which are the major players.

    I start to try to use any of these tools and it seems like they are now overly complicated and actually hinder productivity for non-full time web-designers who also do the entire work (graphics/html/backend server coding). This time i’m using php/mysql. To me its gotten worse not better. (Excluding flash because that is pretty cool).

    Anyhow Dreamweaver to me is not nearly as intuitive on table layout as if it seems to want you to go purely the CSS route to the point it interferes with my productivity. I too spend countless amounts of time figuring out why i can’t lower the height of a column in a table.

    For example i have been struggling for the last 15 minutes on getting text to center vertically inside a cell within a table(I clicked the freaking vertical center box). I’m sure i have some buried css reference property carried forward to this cell by mistake.
    In MS Frontpage this type of thing was easy… and in dreamweaver i’ve gone thru all the properties and styles and keep accidentally/automatically applying certain styles from one column to another and then so on and so on… and nothing seems effective.

    My point is i will figure it out… but it just seems that 5yrs have went by… and i’m much more knowledgeable now technically than i was then… but the freaking tools don’t suit the average free lancer who does all the tiers… (front/middle/back). To me these tools are increasingly being designed for huge shops with people who only specialize in their tier (presentation or middle or back).

    That’s fine for them… but for the rest of us hackers out there… in my opinion CSS/Dividers vs Sytle Settings on tables seems more complicated than beneficial and depending on the type site the performance benefits are non-existance or irrelevant… and as for code maintenance… i still see include files as a far better way to organize your code/mix html etc without adding the headache of dividers… But the pain-the-ass benefits are abundant with today’s reccomended techniques.

    Its funny because i went to ebay to get a copy of FP 2003 because i lost mine… I paid $100 bucks for it new back in 2003… too bad i didn’t keep it because they now sell for $300 on ebay all day long. Not saying frontpage rules because perhaps old versions of DreamWeaver(Pre CSS) were just as good if not better…

    But could this mean there are allot of other people figuring out that today’s tools are bloated with tons of crap they don’t need and have actually complicated more than they’ve de-complicated.

    I agree with the original poster and after browsing many articles to track down why i was having such a freaking hard time adopting the “Holy-Grail” css technology i find this and it seems that in the land of people that do real projects entirely front to back… that others have come to the same conclusion.

    Good luck to all !!!

  7. Bruno says:

    Nice article 100% agree!

    I’m a developer since 10+ yrs, and ALWAYS made websites layouts using tables, nested tables.
    Then someone said: avoid table layout, use DIV’s with CSS.

    I tried to make a “simple” DIV/CSS web site layout (top menu, left menu, content)
    Ok i made it fine. Using lots of float:left / clear both; etc…
    But…. The problem is when the content area width is bigger than the supposed reserved area, the content div breaks and goes under the left menu. All mess up. Tried lots of CSS combination with no success.

    Then I change the layout to the “avoidable” and old-fashioned way using tables/nested tables and “voila” : all is perfect then!! It looks very fine!

    I must agree that CSS/DIV layout sucks and it’s very very limited concerning position of DIV’s, or so i am not exploring all the potentialities of the thing.

    Cheers from Portugal!

  8. Bruno says:

    I forgot: with div/css you “must” have fixed width when choosing a two or three columns layout.
    For my website that was impossible because left menu area and/or the content area could have dynamic width, and so all is dis-configured and mess using divs!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s