Positions Please! - CSS Positioning

[Free Photos]
[Photo Sharing]
[Articulate Presenter 5]
[Introduction to Drupal]
[Introduction to CMS]
[Future of Web Design]
[Macromedia Studio 8]
[Dreamweaver 8]
[Flash Professional 8]

[Articulate Presenter 5]
[Captivate 1 ]
[Contribute 2 ]
[Director MX]
[Dreamweaver 8]
[Fireworks 8]
[Flash Professional 8]
[Flix Pro]
[FrontPage 2003]
[GoLive CS2]
[Namo WebEditor 5.5]
[NetObjects Fusion 7.5]
[Macromedia Studio 8]
[Swift 3D 3]
[Swish 2]
[Toon Boom 3]
[WebEasy Pro 5]
[WebPlus 8]
[Wild FX]
[Xara 3D 6]

[Free Photos]
[Photo Sharing]
[Introduction to Drupal]
[Introduction to CMS]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Flash Video]
[Flash Bitmaps]
[Web Success]
[Web Statistics]
[Web App Roundup]
[Creative Suite]
[CSS Positioning]
[HTML Tables]
[Understand CSS]
[Flash Usability]
[Web Fonts]
[MX Explained]
[Flash Animation]
[Web Design Roundup]
[Web Buttons]
[Flash 5 Tutorial]
[XML Revolution]
[Dreamweaver Tutorial]
[FrontPage Tutorial]
[Web Design/HTML Tutorial]
[Web Graphics Tutorial]
[Fusion Power]
[Site Structuring]
[SVG Format]
[Web Repurposing]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]

you can help support the site with a direct donation or by shopping via the following links:


Thank you!



The Future of Web Layout

Tom Arah looks at the importance of CSS positioning for the future of web layout..

A few months ago I looked at the problems involved in layout on the Web and promised to return to the issue. As we saw then (RW105), HTML rendering employs a "liquid layout" approach where text automatically flows to fill the full browser width. This system is simple and flexible - but it's not enough. In particular it's crucial to be able to provide visitors with side columns containing links or alternative information alongside the main body copy. The original and still much the easiest way to produce these column-based web layouts is by co-opting HTML's <TABLE> tag. The support for HTML tables in both authoring apps and browsers is strong and, with both expanding and fixed width cells, you have considerable layout control. Problem solved?

Well not exactly. Tables do offer plenty of layout control, but that itself causes problems. In particular if you look at a typical Web page you'll find tables being used like there's no tomorrow to produce advanced nested grids, even to control the spacing between paragraphs! The end results might look good in today's desktop browsers, but investigate the code and it's another story. What you'll find is reams and reams of table tags far outweighing the actual text content. It's horribly inefficient for the browser to process and for the Internet as a whole to carry. When producing layouts via tables the best advice is therefore to keep it simple and limit their use to the core page framework.

HTML tables are the framework for most web layout, but the effects on code, adaptability and accessibility are disastrous.

However the problems with using tables are even more fundamental. By scattering the web page's content into table cells solely to produce a particular end appearance in Explorer or Netscape, the underlying structure and content flow is broken. This immediately becomes apparent when the page is viewed on a non-desktop browser such as a mobile device with limited resolution display or is presented to a screen reader application to be read out to the site visitor. Maintaining the page's underlying structure isn't just crucial for end user accessibility, it is also fundamental for design adaptability - as you'll soon appreciate if you have to redesign an existing table-based site and realize that this has to be done manually cell by cell!

So is there an alternative to the use of tables for layout? It's clear that whenever HTML is forced to handle style as well as content both end up suffering, so what we need is an alternative way to manage the layout and presentation of information while leaving HTML or XHTML to handle its structure and content. This should be sounding familiar. This is exactly the same position we were in when we looked at the problems of text formatting on the Web (RW101). There the situation was that early web designers had seized on the <FONT> tag to take a grip on their type with similar undesirable results: clogging up pages with reams of grossly inefficient code that restricted both accessibility and adaptability. The solution for text formatting was the introduction of Cascading Style Sheets (CSS), a presentational markup language designed to work alongside HTML's structural markup. And CSS is also the solution for efficient, accessible and flexible layout.

Cascading Style Sheets is a presentational markup language and partner to HTML.

But before CSS can be applied to layout, we need a structural element to which it can be applied. For text formatting we saw that the presentational CSS is easily linked to the existing structural HTML tags either directly inline or by creating class-based rules. To create an indented paragraph style, for example, you can create a CSS class in the page's <head> element with the code <style> .indent {width:80%; margin-left:10%} </style> and then apply this class and formatting to any block-level tag, for example <p class="indent"> or <h1 class="indent">.

For layout purposes though we need to be able to break free from HTML's individual block-level tags and to control blocks of text containing any amount of tagged text (and images). The solution was the introduction of a new generic container tag in the HTML 3.2 specification, the <DIV> division tag, which can be used to mark off any block-level structural division, small or large. To indent a whole series of paragraphs for example, rather than applying the indent class to each block-level tag in turn, you can instead wrap the entire section in a styled division: <div class="indent"> . </div>.

With the <DIV> tag in place, we've now got the necessary structural unit to begin taking layout control. Having a generic container for arbitrary amounts of content is useful when used in tandem with the familiar CSS text formatting attributes to manage features such as margins and alignment - but the layout of the text and positioning of elements is still based on the flow of the underlying source code. How do we take it to the next level to create columnar layouts? Sadly there's no simple CSS "multicolumn" attribute that we can call on so instead we have to think laterally.

The underlying idea should be familiar from the handling of web graphics where, if you right align an image, the following text automatically flows around it. Under CSS formatting this behaviour is controlled with the "float" attribute and it can be applied to various elements including the <DIV> layout division. The basics necessary to mark off a column of text 150 pixels wide to float to the right of its parent element (by default to the full-page <body> element) would be to create a CSS class - <style> .rightcolumn {float:right; width:100px} </style> - and then apply it to any arbitrary block of content - <div class="rightcolumn">. column text . </div>.

By adding some padding and margins and maybe a background colour or border we can produce a much more stylish side column. By adding a second <DIV> element aligned to the left we can produce the classic web layout with column-based links and supporting content on either side of the central body copy. And all of it using efficient, flexible, centrally-managed and W3C-endorsed CSS and no <TABLE> tags in sight.

CSS1 can be used to produce floating side columns.

However it's not all good news. To begin with, the floated columns have to come before the main content column in the source code. This breaking of the natural structural order was one of the major criticisms of table-based layouts. Worse, if viewed in a non-CSS supporting browser, the user will see the content both full-width and in this undesirable source code order (the larger question of CSS support is one we'll return to). More to the point, this text-wrap system has a very undesirable feature: the side column's height is determined by its contents and so, where the side column is shorter than the main copy, the text spreads out again like toothpaste to fill the full width of the containing element. Changing line lengths like this, especially on the left margin, are more difficult to read and ugly.

Clearly what we need is more powerful CSS-based layout control. And that's exactly what the W3C provided in 1998's Cascading Style Sheets level 2 recommendation (CSS2). The central idea in CSS2 was to enable those who wanted to, to break away from HTML's default positioning system where content is flowed sequentially into the browser window and any element's final location is determined by what's gone before it in the source code. Instead the idea was to provide an "absolute positioning" mechanism to finally enable the designer to position elements accurately and anywhere they want on the page.

Again the <DIV> division tag is the structural unit to which this new absolute positioning is most usefully applied (either via a class or one-off id, or directly inline) in effect turning it into the Web equivalent of a DTP-style text box. And all that is needed to complete the transformation are three new CSS2 attributes. First you need to set the "position" attribute to "absolute" to ensure that positioning is fixed based on the current parent element which in most cases will be the <body> element and so the page as a whole. Next you need to specify the desired offset which is most commonly done with the "left" and "top" attributes which are set to the x and y co-ordinates in pixels from the current container element's top left corner (alternatively you can position elements via CSS2's "right" or "bottom" attributes). Throw in the existing CSS1 "width" and "height" attributes and you've got all that you need to take pixel level control of your web layout so that <div style="position:absolute; left:10px; top:10px; width:150px; height:600px"> .content. </div> creates a precisely sized and positioned sidebar.

Unlike the floated column above however, this column doesn't automatically force text to wrap around it so any text outside the styled division will be laid out as usual and so overlapped by the sidebar, which is clearly unacceptable. The obvious solution is to make sure that all page content is in its own absolutely positioned <DIV> container. This then raises the question of what happens when the contents are too big for their box as defined by the "height" attribute. One option is to setting the "overflow" attribute to "scroll" so that scrollbars appear when necessary to allow users to view all content within the fixed boundaries of the defined box. Usually that's not necessary however as the default behaviour in both Explorer and Netscape is for the box to expand so that all the contents are rendered, which means that we can easily create a three column, fixed width, flexible height layout without the undesirable text spreading of the CSS1 float-based layout.

Making life even easier is the fact that, unlike CSS-based floated columns which need to be hand coded, absolutely positioned boxes are supported in the main web authoring packages, Dreamweaver, GoLive and now FrontPage 2003. In Dreamweaver for example you can use the Insert > Layer command to quickly add a <DIV>-based container and then drag it to size and into position. And you also get easy access to one of the major benefits of the CSS-based approach to web layout: scriptability. By using Dreamweaver's predefined behaviours you can set up timeline-based animations and dynamic effects where boxes are hidden and shown depending on end-user interaction.

CSS2 absolute positioning enables precise placement and dynamic scripting.

With the pixel-based precision offered by absolute positioning along with advanced features such as scroll bars and scriptability we've certainly come a long way from HTML's default free-flowing layout. In fact we're moving into the realm of multimedia-style screen-based layout. It's a useful design option to have but the Web is primarily built on the more flexible and forgiving page-based model for good reason. The typically pixel-based fixed layout approach of absolute positioning has one fundamental flaw: it's inflexible. In particular, if the browser window isn't wide enough to display all our <DIV> containers, the end user will have to scroll repeatedly to read the page content which is totally infuriating.

What we really want is a way to combine the precision and control of CSS absolute positioning with the flexibility of HTML's default liquid layout much as tables can combine fixed-width side columns with a fluid central content column that expands/contracts depending on the size of the browser window. In fact CSS positioning does support relative positioning and percentage widths and even minimum and maximum widths, but it doesn't provide an option to produce a column that soaks up all remaining space (you could do this with some scripting on page load, but the column size wouldn't change as you resized the browser).

However, as always, there's a workaround. All we need to do is to add our side columns using CSS2 absolute positioning with pixel-based fixed widths and then create a CSS1-styled flowing central column with its margins brought in accordingly. The core framework for this is very simple: in the page's <head> element add the following styles, here defined as one-off IDs:

<style type="text/css">

            #leftcolumn {position:absolute; left:10px; top:10px; width:150px;}

            #centrecolumn {margin-left:160px; margin-right:160px;}

            #rightcolumn {position:absolute; right:10px; top:10px; width:150px; }


and then apply the styles to the relevant text blocks: <div id="leftcolumn">.</div> and so on. 

Combining absolute and fluid positioning provides layout control and flexibility.

Thanks to CSS and especially CSS2 it looks like we've finally managed to take control of our web page layout. We've gained pixel level precision without having to sacrifice free-flowing flexibility and we've gained considerable new power such as scriptability in the process. And, because we've managed to keep HTML content and CSS presentation completely separate, our page remains easily adaptable, maintainable and accessible. It looks like it's time to ditch those table tags once and for all.

And wouldn't it be nice if life was like that? Sadly of course it's much more complicated. And much of the blame for this must be directed at CSS itself. I've tried hard above to make the shift to CSS positioning sound natural, straightforward and painless, but that's only possible thanks to the hard work of numerous pioneers such as Rob Chandanais, Owen Briggs and Eric Costello, who've struggled to make sense of CSS for layout and, more importantly, to make it work in a real world context.

And while, thanks to their efforts, the main problems of how to produce workable layouts from the CSS specification have now been cracked, there are still innumerable smaller issues ready to raise their head and make the designer's life a misery. Such as: how to consistently control margins and padding to ensure alignment, how to set up a full-width footer section below columns of varying length; how to vertically centre content; how to give a coloured background to a side column that matches the height of a longer content column; and so on. These are all givens with table-based layout and should certainly have been addressed before CSS2 was allowed out of the door.

Sadly the complexity of CSS positioning has had other knock-on effects. While the support for screen-based design via absolutely positioned layers is now reasonable in the main wysiwyg authoring apps, designers are on their own when it comes to producing the more desirable flexible floating and mixed layouts. Until this changes, there's no way that CSS positioning will replace tables and become the mainstream choice for web layout.

Much the biggest issue holding CSS positioning back isn't authoring support, but browser support. Or rather the lack of it. As we saw when we looked at CSS-based text formatting, coming up with a brilliant concept is all very well but it's virtually useless until the browsers, and more importantly the vast majority of browsers, support it. This delayed any meaningful use of CSS positioning for years but nowadays, over five years after the CSS2 recommendation was released, all the browsers in serious use claim comprehensive CSS support.

But that doesn't mean they do it properly. And sadly this doesn't only apply to the more advanced CSS features such as the "min-width" and "max-width" attributes which no browser yet supports - it applies to the layout basics of the box model itself. And, as we saw with CSS text formatting and Navigator 4, a bad implementation is actually far worse than none at all as it means that you can't even safely provide the CSS version for those browsers that do behave correctly. The main culprit when it comes to CSS positioning is Internet Explorer 5.x which misimplements the CSS box model entirely by placing border and padding values inside the specified box width rather than outside! It's a trivial programming error but the effects are catastrophic for the poor designer and threaten to throw the idea of box-based layouts out of the window.

Making matters worse is the fact that while Navigator 4.x has now largely been eradicated from the system, Explorer 5.x is still popular and so has to be dealt with. Originally the only option was either to avoid borders and padding or to set up browser sniffing to direct the browser to different stylesheets or different versions of the same page which is hardly reassuring or practical. Again though resourceful end users have come to the rescue. In particular Tantek Çelik has used another of Internet Explorer 5.x's failings, this time when it comes to parsing, to apply one width and then immediately override it (http://www.tantek.com/CSS/Examples/boxmodelhack.html).

Hacks are necessary for cross-browser consistency.

Eventually then, with a bit of effort and yet more lateral thinking, it is possible to set up layouts that work for all the main browsers, but there's no question that CSS-based positioning is looking much less attractive: it's complicated to set up and this must be done manually; there are still crucial design elements that tables handle better; and to work consistently it requires an awkward workaround that might itself break under future browsers. So does this mean that CSS positioning is dead in the water?

Absolutely not. To begin with, there are those pages and sites for which CSS offers layout power over and above that offered by tables such as those employing scroll bar layouts and dynamic content. And, over time, these advantages will increase as browser support improves. In particular the CSS2 specification already includes attributes to control clipping and fixed positioning which will eventually enable layouts with DTP-style non-rectangular masks and frame-style fixed content on their pages - both high on many designers' wish lists. And of course in time the need for CSS hacks should also disappear.

More importantly, you can already produce good work with CSS positioning. Trying to convert an existing table-based design isn't recommended for the faint-hearted - check out Jeffrey Zeldman's instructive experience at http://www.alistapart.com/stories/journey/ However, if you're producing a new site from scratch and so able to exploit the strengths of CSS while avoiding its pitfalls, you're in a much better situation. And, if you visit a site like BlueRobot's Layout Reservoir at http://www.bluerobot.com/web/layouts/ or Eric Costello's CSS Layout Techniques at http://glish.com/css/, you can even pick up an off-the-shelf CSS-based layout framework ready-to-go.

The bottom line is that, while it undoubtedly involves more work and effort to create a successful CSS-based layout compared to a traditional table-based layout, it will almost certainly save you time and effort in the long run. After all the W3C has made it completely clear that the use of tables for layout is deprecated and that the preferred way to handle page design is through CSS.

At least that's one absolute position that's nice and simple.

Tom Arah

October 2003

Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Web designer-info.com

designer-info.com: independent, informed, intelligent, incisive, in-depth...

All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah

[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.