Flexible Layouts with CSS Positioning

by Dug Falby

119 Reader Comments

Back to the Article
  1. Dave bug: I try to get my lines of text to wrap in the region of thirteen words (probably down to who trained me).

    Aren’t the design decisions we make about fixed/liquid layout less about line length, and more about the fact that there is no standard user agent or no standard user platform or device?

    Copy & paste the code below to embed this comment.
  2. Dave: One word (or is it 2?): white-space.

    Your right in that a lot of sites won’t have wide elements in the content area. But a liquid layout still means you can increase the amount of white space around the content to make it more readable (and look better to).

    I can think of a few other examples. Tabbed navigation across the top of a page is the main one I can think of. The text is usually bigger, has more padding, and generally you don’t want any text wrapping going on.

    Another example are the headers for the posts in this forum. I think it they look much nicer and easier to read on one line, rather than wrapped.

    Don’t forget, the only reason that it’s better to keep text blocks narrow, is that it means you don’t get confused as to where you are. With element that only contains a few lines, this isn’t so much of a problem.

    Copy & paste the code below to embed this comment.
  3. Would having a id tag for EVERY tag be a good decision for layout rearrangement purposes?

    Copy & paste the code below to embed this comment.
  4. Abraham,

    Sounds like overkill to me, but I went through that phase too. If you design your site intelligently from the get-go then there’s no need for giving every character its special place in a .css file.

    I used to give every paragraph a unique ID and put it in a <div> with special margins and padding. I realized that was dumb and was just as good because I could specify how I wanted to format the text.

    A bonus is that your files will be much smaller than before.

    Copy & paste the code below to embed this comment.
  5. Any page layout method which relies on Javascript is pointless since web user stats at sites such as http://www.thecounter.com/stats/ show consistently that 11% of users have Javascript disabled. As more and more security scares abound, like the recent IE/Outlook Express malicious URL exploit, the figure can only increase.

    Copy & paste the code below to embed this comment.
  6. Gary,

    I’d be curious to hear some feedback about this page: http://www.cognima.com/ with Javascript enabled/disabled (but with CSS turned on, of course).

    Thanks

    Copy & paste the code below to embed this comment.
  7. In regards to this quote from the article:

    “Nothing unusual at this point, except those of you who are familiar with the absolute/relative property will have worked out that these containers will not expand when filled with absolute DIVs.”

    That is totally incorrect! Relative elements DO expand to contain their absolute contents. I just ran a test, and Moz, IE, and Opera (in win) all do exactly that. Here is a demo page:

    http://users.rraz.net/mc_on_the_rocks/testpage/abs.rel.test.html

    Kinda blows away the point of the article.

    Copy & paste the code below to embed this comment.
  8. In regards to this quote from the article:

    “Nothing unusual at this point, except those of you who are familiar with the absolute/relative property will have worked out that these containers will not expand when filled with absolute DIVs.”

    That is totally incorrect! Relative elements DO expand to contain their absolute contents. I just ran a test, and Moz, IE, and Opera (in win) all do exactly that. Here is a demo page:

    http://users.rraz.net/mc_on_the_rocks/testpage/abs.rel.test.html

    Kinda blows away the point of the article.

    Copy & paste the code below to embed this comment.
  9. Unless I’m missing a stylesheet link in Big John’s example, those elements are neither absolutely nor relatively positioned: there’s no ‘position’ property for either of them.

    Copy & paste the code below to embed this comment.
  10. I have attempted three times now to build sites for clients that use CSS positioning, and each time have had to retreat because the technology doesn’t stand up to the client’s expectations. We can jaw all that we like about having “fluid” design and not worrying about pixel-perfection, but as it turns out, that’s what clients want.

    I was so incredibly excited at the prospect of working with CSS to lay out pages, and I have been so incredibly disappointed by the fact that (1) browser manufacturers randomly interpret standards but more importantly (2) the standard writers haven’t got a clue about how real web sites are built and maintained. The fact that you cannot say “I want this column to stretch from top to bottom, no matter the page length,” “I want a footer of yea height at the bottom,” or address any of a plethora of similar everyday layout needs is depressing. Almost as depressing as NS 4.7 was to anyone with a logical bent working with table layouts.

    Some things in the CSS standards are inexplicable: who thinks padding is outside of the box? What’s the point of margin and padding if they largely do the same thing?

    Nice article, but rather than get involved in a whole new world of hacks, I’ll have to keep working in tables for awhile, even if it means giving up some of the tremendous advantages of CSS such as z-index and far better background support. Not all of us have the luxury of building “blog”-style sites. My corporate and entertainment commercial sites all rely on pixel-perfect layout—and no amount of appealing to the client’s better side is going to change that. Another dream dashed.

    Copy & paste the code below to embed this comment.
  11. The issue always seems to be placing content in a center row made of multiple columns with maybe a header row and a footer row. But what about complex designs with more than three rows? A piece of cake with tables, but we are at the preface of a new design era.

    I challenged my self to this issue a couple months ago and found a solution that I am willing to accept. Yes, it too uses JavaScript, but you have to pick your battles. If 12% of the population has JavaScript disabled and you are concerned about that, what about the 10% of the male population that is color blind to the color red? Have you designed your page with that disability in mind? Feel free to see my examples and tutorial at http://www.spinwebdesign.com

    Turning off JavaScript is a user preference and that is something you can somewhat control by instruction users that your site requires it. But how do you address color blindness? My rule of thumb is to code to the default installation of the browser. This means at an 800×600 resolution, most browsers allow you a 760×420 workable space because of the default tool bar layout, JavaScripts is enabled, cookies are accepted, etc… If the user is smart enough to alter the default settings, I hope they are smart enough understand the consequences. (Of course, the exception to this is the managed PC in a corporate environment where the end user may not control these settings.)

    My solution addresses the box model hack (http://tantek.com/CSS/Examples/boxmodelhack.html) however, does not address the overlapping div problem Dug spoke about. I had though about fixing it, but have been to lazy to address it yet. My solution also addresses issues with column widths when mixing fixed and dynamic width’s together.

    Hey, as designers we need to keep pushing the envelope in hopes that the browser makers will continue developing for standards. CSS3 can’t come soon enough for some of us, but it is probably coming way to fast for them.

    T.J.

    Copy & paste the code below to embed this comment.
  12. The variables in viewing a page are:
    – the text font size can vary at the whim of the user – they might have a 300dpi screen or a 75dpi one, they might be partially sighted, whatever;
    – the browser width might be 10000px or 100px – they might be on a wallscreen or on a PDA.
    The only constant is that image sizes are a fixed pixel width.

    All the CSS “I don’t need a table” column layouts here seem to miss the fact that the content of the columns plays an important part in determining the width.

    If I used a table to lay out a page, then I can persuade it that
    – a column must be at least the width of any image
    – a column has to be big enough to display the text it contains – there’s a width below which the text runs into the next column, so it can’t be shorter than that
    – a horizontal scrollbar will at some point be required if the columns are all at minimum width and still too wide to fit within the browser
    – one or two columns should share out the ‘spare’ width available.

    Setting pixel widths, percentage widths and so on just doesn’t cope with this. If your browser is narrow, the suggested layout in this article doesn’t work; if your font is large, ditto.

    Copy & paste the code below to embed this comment.
  13. I think that our role as designers/developers should focus on making content accessible. While clients want pixel perfection it’s fairly easy to disuade them given some of the inherent problems with that goal.

    First explain to the client that it is nearly impossible to get exact pixel perfection for every user agent. Part of this is due to how each user agent calculates screen width and margins. Another issue is that some user agents do not rely on the visual placement of elements on the screen (ie. screen readers, magnifiers, etc.). A pixel perfect site is lost to the visually impaired. And the last thing you want to do is make your site unusable to a large cross section of the population (visually impaired, elderly, physically impaired, mobile users, and those with older equipment)

    Second explain to the client the cost and time involved to develop such a site. Money talks. The faster the site is up and online the faster they are making money off of it and the less money they are paying you to fidget with it.

    Third, along with money talks, discuss on going maintenance and changes to the site as technology changes. Discuss how your design will be easier to migrate to a new technology because of how purposefully forward looking you’ve structured it. Compare how much it might cost for a pixel perfect site versus a more liquid site. These costs should include bandwidth, time to update content, etc.

    Fourth only designers care about pixel perfection. The average user will hit a site with ONE user agent. They won’t hit a site with one and then return with another to see how far off the margins are. If the site is designed to look reasonably similar between the major browsers then 99.8% of the viewing audience will never notice. They might hit the site at home on IE/mac and then two days later hit the site from work with Mozilla – but 3 pixels difference one way or the other they won’t notice and won’t care should they notice. Their focus will be the content of the site – could they read it, was it usable. If it’s not legible and not usable they will go elsewhere (clients will not want users going elsewhere).

    The main point I would make is that flash doesn’t work for everyone and tables are absolutely horrible to use both from a developer stand point and a user standpoint. Tables don’t reflow well for all screen sizes, they throw off most screen readers, most developers set them at fixed widths which cause the user to scroll if they have a smaller display, and they can slow down page rendering times and add unnecessarily to page bloat (especially when nested).

    Clients and developers are going to try to say – well we’re really only targeting male users 18-35 with IE5+. And that’s great, target all you want. In reality the site will get hits from Grandma shopping for her 24 year old grandson, or some guys wife who shares the same interests he does, or some guy in Canada who has control of only a pinky finger, or this guy I worked with at my last job who had only a finger and a thumb on his right arm (and could handle customer service calls better than anyone in the call center). As soon as one of those people hits the site and it’s innaccessible to them, they’ll remember it and pass it along. Slowly that target audience will be dissuaded from visiting.

    Using properly structured html to create usable accessible content and then style it with CSS is really the best way to go. If you have the ability to use server side parsing XML/XSLT/XHTML/CSS is a great way to go (I use that now) because it gives you some more flexibility before sending to a client.

    P.S. Usability studies show that more than 75% of users prefer liquid layout to fixed. 20% +/- sites use liquid layouts. Line length in printed material has an optimal reading length for a fixed font (somewhere less than 4 inches). Line length on a screen does not follow the same rule. The longer a line length on the screen the faster a user can read it. Users prefer shorter lengths (4-5 inches) but as far as usability longer is better (8-10 inches).

    I recently recreated a fairly complex intranet site using XHTML and CSS. The goal was to recreate it as closely as possible to the original fixed width table formatted and review the outcome. The outcome was that I had a site almost identical to the original, that reflowed properly as I resized the window or changed font sizes. The site also displayed almost identically in Opera/Moz/IE5+. Code was easier to read and there was less of it (20% reduction in HTML). Lastly I needed no “hacks” to get it to display properly. (no scripts, no broken tags, no workarounds). It can be done. I’d agree with T.J. as developers we constantly need to push the envelope. Part of that means not giving up on the “impossible”. Part of that means pushing back against clients and to do things correctly.

    Copy & paste the code below to embed this comment.
  14. man that was long! Sorry! I just go off sometimes.

    Copy & paste the code below to embed this comment.
  15. Michael—

    I agree with your sentiments, but the biggest obsticle for me thus far was been clients who don’t want to be “the experiment.”

    I’m building a site right now that is a test so that I don’t have to spend the “learning curve” on my next client’s site. It’s going well (and I’m able to do somethings in CSS that a table-based layout would puke on), but some things which should be simple (I cannot get background colors or images in DIVs to show up in IE Mac 5.x, for example) aren’t. One thing you can generally say about tables is that they look pretty much the same no matter what browser they’re in…though I suppose I’m building in the hacks I’ve learned over the years and don’t even think about them any longer.

    My frustration is that CSS is based on standards that still fail because the dorks in the programming cubes find it interesting to add in more “features” no one cares about rather than building the core of their product correctly.

    But my frustration also stems from the fact that the people who draw up the standards fail to think about what might genuinely might be useful, usable and in-line with the way the web is used and built. All of the end users “think outside of the box,” so why don’t the standards folks do the same? Ivory towers are lovely to look at but none of us live in them.

    One point: designers care about pixel perfect because they have to. Someone has to. Perfection may never be reached, but striving for it, whether in a liquid layout or a rigid grid, is our job. Not one of us should be entirely satisfied to say “good enough” if there’s the chance to make our work “perfect.” This includes accessibility, of course, and I certainly don’t advocate style over substance or over-designing sites simply because we can. Style WITH substance is a beautiful thing and adds up to something greater than either element by themselves.

    Finally, and this is now so far off the article’s topic that I almost feel bashful, I am surprised and perplexed in seeing so many examples of things that only work in the Gecko engine or on a Mac. I like Netscape 6.2 here on my windows machine, and my CSS works beautifully in it, but I use IE 6 as my “daily browser and ensure that whatever I do works flawlessly in it, too. I design and build using a Windows box. Why?

    http://www.upsdell.com/BrowserNews/stat.htm

    Yes, I know we should take stats with a grain of salt. But the numbers are overwhelming, and where there is smoke there is usually fire. Designers and builders who dismiss IE 5 or 6 on a PC from their world are committing the sin of hubris. As much as Apple commercials tout those four people who have switched from a Windows machine to a Mac, that’s not the way things work in the real world.

    Copy & paste the code below to embed this comment.
  16. I do agree with you to an extent.

    The problem with today’s stats is that because of the developers adding in those “features” we have browsers that masquerade as other browsers. So while our stats say 99% IE it could be 70% IE 25% mozilla/netscape 5% Opera. So the feature that allows other browsers to surf sights designed specifically for IE actually does a disservice because it helps to reinforce the fact that site developers should be developing for IE only (well the logs say that 99% of my visitors are IE, why bother with the other 1%).

    Stats also don’t really tell you how the browser is being used or what other applications are being run. For instance a screen reader running over the top of IE won’t show in the logs, javascript being turned off won’t show, using a different style sheet for all pages won’t show, font size won’t show. To me stats have always been about who is accessing what (what content is important and how they get to it). While I get it that the stats might show “the majority of users are accessing using MSIE on Windows”, I do have to take the stats more generally today than I did a year ago.

    That’s what made me start to work more toward just designing against the standard and avoiding work arounds and proprietary calls. Then again I work on substantially different sites than probably the majority of people here. My goal has been to set up a framework of HTML CSS and Javascript that uses the standards to allow developers to very quickly create pages without worrying about where an image is going to fall exactly. The developers focus on content, and allow the CSS to do placement.

    My personal opinion is that the more developers focus on standards use the more the browser makers will focus on standards support (instead of e-mail, javascript debuggers, themes, colored scroll bars, etc). If “features” get ignored maybe they’ll stop fidgeting with them and work towards more consistent standards.

    And yes the standards bodies could work a little harder to being more clear about a standard. This would keep three different browser manufacturers from interpretting one standard in three different ways.

    Copy & paste the code below to embed this comment.
  17. Roger,

    Just wanted to jump in on two points.

    “but some things which should be simple (I cannot get background colour or images in DIVs to show up in IE Mac 5.x, for example) aren’t”

    I agree, it is monumentally frustrating that some very simple things can appear impossible with CSS. Luckily, the background color and image thing in IE Mac 5.x isn’t one of them. In most cases, Microsoft’s spec means that attributes will not be applied to a DIV unless a width is specified (at this point I switch to google expecting to be able to give you a link to follow and of course can’t, perhaps someone will fill you in) and this is probably what’s giving you grief.

    “designers care about pixel perfect because they have to. Someone has to. Perfection may never be reached, but striving for it, whether in a liquid layout or a rigid grid, is our job”

    Again, I quite agree that is our job to strive for the best. Otherwise, what’s the point, and as you say, “good enough” is crap. Where I’d like to adjust the debate is over the use of the phrase “pixel perfect”.

    It seems to me that people are increasingly interchanging “pixel perfect” with “perfect”. In most of my design work online, the pixel position of an object is, largely, not that important. Of course, there are cases where a single pixel mis-alignment can spoil the layout, but you know, those are generally the cases where CSS makes it easier to achieve pixel perfection.

    Check out the small arrow graphic that points to the “contact us” button at http://www.cognima.com/ I wanted this arrow to line up exactly (to the pixel) with the top of the button. This was simple to achieve with the stylesheet. Again, in this example, I sort of don’t care where in terms of x,y position the button goes on the page, just that it is under the last column. By defining it as a background graphic, not only can its position be controlled, but it nicely goes away when in a text browser, avoiding the need to display “alt” information like “this is an arrow” and so on…

    Copy & paste the code below to embed this comment.
  18. i hnow hundreds of people that use netscape 4.7

    Copy & paste the code below to embed this comment.
  19. I really want to use css instead of tables, only I can’t.

    I’m trying hard to find a way to position a div inside another div, and align it at the bottom.
    I have some space at the bottom of the page, and I would like to have a footer at the bottom.
    The whole thing is placed in a column with a fixed width.

    Normally I would do something like this:
    <table height=“100%”><tr><td valign=“bottom”><div>Footer</div></td></tr></table>

    and I’m trying hard to do something like:
    <div >
    <div class=“footer”>Footer</div>
    </div>

    only it doesn’t work.
    my .footer is currently position:relative; bottom:0px;
    can it be done? – if yes, then how?

    please save from falling back to my old habits

    Copy & paste the code below to embed this comment.
  20. I think this is a critical point. We need CSS to enable a second, following container div to be aware of the actual height of the previous container div (meaning the heights of the block elements nested within that first container). Without this, it is much too difficult to get footers positioned where they ought to be. If tables can do it, you ought to be able to do it with CSS.

    And no, I don’t think going back to tables is a satisfactory solution (although I udnerstand why some people might do it).

    Mike Davidson worte:

    >I think it is pretty unbelievable that with how great CSS1 and CSS2 are supposed to >be, no one built in the ability to keep absolutely positioned div somewhat within the >document flow. For instance, if you have 3 columns (divs) all absolutely positioned >within a container div, you should be able to insert a footer div after your container >div in the code and have the browser render the footer div at the bottom of the >longest of the three columns. It is simply ridiculous that this cannot be done.

    Copy & paste the code below to embed this comment.
  21. Interesting topic and I like the basic ideas around the approach. It looks great on the example web site, as long as you don’t use NS4 or Mozilla.

    That is why all of the div positioning stuff won’t ever be used by me. You can’t position things reliably unless you add hack after hack after hack and test browser after browser. So why bother? Tables work just fine for layout no matter what they are linguistically intended for.

    Another problem with the desire to make an XML-like structure is that when the marketing department wants to add this or add that to a page, then you have to create another div with another id…Now you’re losing the simplicity and structure and hacking some more. And of course it never fails: then the page breaks.

    It’s fun to try, though.

    Copy & paste the code below to embed this comment.
  22. Janus: What you need to do is give the footer element the following CSS properties:
    .footer { position: absolute; bottom: 0 }

    This will take the footer element out of the flow of the page and fit its bottom to the bottom of the container element.

    You will also need to give the container the following CSS property:
    .container { position: relative; }

    This tells the footer element to position itself relative to the bottom of the container element, NOT relative to the bottom of the page itself.

    However, because the footer element is out of the document flow and doesn’t occupy any room, the content above it in the container div will try to flow beneath it. What you’ll need to do is give the container element a bottom padding greater than or equal to the expected height of the footer element; this will keep the content before the footer from flowing beneath.

    Further note: because absolutely-positioning an element makes its width ‘shrinkwrap’ to fit the size of its content, you might want to manually set width: 100% to make the footer fill the width of the container element again.

    Copy & paste the code below to embed this comment.
  23. …and all that so we can pat ourselves on the back for not using tables. I really want to use CSS for layout, and I do on almost every project nowadays, but as Peter puts his finger on it still has ludicrous shortcomings.

    CSS-3 had better have some timely solutions. Another 3 years down the track, I don’t want to have to listen to the W3C lamenting the self-inflicted rise of counterintuitive hacks and illogical techniques for presentational layout, just like they have the rise of counterintuitive hacks and illogical techniques for semantic markup.

    Copy & paste the code below to embed this comment.
  24. Another alternative is to make your footer the same width as your central column, or at least make the width of the content inside the footer the same. It doesn’t stay at the bottom of the page – it sits underneath the main column – but at least nothing important is hidden.

    Copy & paste the code below to embed this comment.
  25. Why do people continue to assert that Opera is so standards-compliant? My web pages always look great in IE6, Mozilla 1.0 and Netscape 7.0, but they look terrible in Opera 6. Again and again Opera is the odd guy out. Opera 7 finally renders my pages as they look in the other main browers. But I don’t know what people are thinking when they say Opera has had great standards compliance since v5.

    Copy & paste the code below to embed this comment.
  26. My web pages are composed of validationg XHTML 1.0 Strict and CSS2.

    Copy & paste the code below to embed this comment.
  27. My page looked great in IE5 and 6, and Netscape 4.7 and 6 etc etc. But looked diferent in Opera 6. The reason wasn’t a bad browser, but bad design on my part. I since added a couple of tweaks and it is almost identical (bar things IE doesn’t support like dotted borders).

    So Opera is very standards compliant, if you tell it enough information. If you don’t, then it goes to default rendering, which is different to how you are used to, obviously.

    Copy & paste the code below to embed this comment.
  28. Just because it is valid code doesn’t mean it is telling the browser everything it should be. My code was also valid HTML and CSS, but still had problems until I included extra defining properties.

    Copy & paste the code below to embed this comment.
  29. Jeremy wrote: “Why do people continue to assert that Opera is so standards-compliant? My web pages always look great in IE6, Mozilla 1.0 and Netscape 7.0, but they look terrible in Opera 6.”

    Could you give us some links to these pages, perhaps?

    Copy & paste the code below to embed this comment.
  30. Diane wrote: “That is why all of the div positioning stuff won’t ever be used by me. You can’t position things reliably unless you add hack after hack after hack and test browser after browser.”

    And table positioning, of course, was plain as day and worked perfectly in all browsers from the start, right?

    “So why bother? Tables work just fine for layout no matter what they are linguistically intended for.”

    Why DO tables work just fine for layout? Because you’ve learned to master them. How will the web ever evolve if “designers” continue to say “Oh, I’ll never use this new technology, because it doesn’t work exactly like the old, stupidly complicated and incorrect one I’ve spent lots of time learning.”?

    And why bother? Yes, if you only care about how pages LOOK in old (pre Netscape 4) and current GRAPHIC browsers, if you don’t care about low-bandwidth and other future devices, if you put appearance before content and accessibility, why bother indeed?

    Copy & paste the code below to embed this comment.
  31. Why does he insist on using those damned tables for layout in his commercial projects? Why does he use pixel sizes?

    Answer: he’s not as dumb as his followers (or writers)!


    topico

    Copy & paste the code below to embed this comment.
  32. Congratulations on the idea of bubbling up the size of an absolute element. What a pity it is necessary. Why didn’t the CSS designers take on board the notions of visual interface structure that one sees in GUI layout managers? Not that AWT (say) is perfect, but it’s a lot less time-consuming if one simply has to specify the topological relationships between the elements rather than the precise geometry. Or perhaps we should use VML and SVG and give up on HTML altogether :)

    Copy & paste the code below to embed this comment.
  33. Looked at the example site listed in the article. It breaks under Opera 7.0 Beta 2. My experience with Opera suggests it will also break under all Opera 6.0 browsers. Columns overlap.

    Copy & paste the code below to embed this comment.
  34. I’d rather use the @ import style methods than JavaScript. Scripting is a last resort.

    Copy & paste the code below to embed this comment.
  35. topico wrote: “Why does he insist on using those damned tables for layout in his commercial projects? Why does he use pixel sizes?

    Answer: he’s not as dumb as his followers (or writers)!”

    Like, could you, like, you know, um… “elabberate” a bit, kindathing? I, uuuh, I think I’m stupid.

    Of course, it would be best if Zeldman answered your question himself.

    Copy & paste the code below to embed this comment.
  36. I really agree with Alun’s table layout.

    My problem is (and I’m sure a lot of designers have this) that I want to have a grid and each column should be fill with a background-color – UP TO THE HIGHEST COLUMN.

    With a ‘blind table’ I have no problem. For the other solutions I have to use a JS hack as above (IE & Opera are too slow – Mozilla is fast), but it’s greater hack and overhead to do.

    Maybe the w3.org should define HTML tags like <divtr> <divtd> and also the CSS display types ‘div-row’ and ‘div-column’. … Where are the problems?

    ROBERT

    Copy & paste the code below to embed this comment.
  37. Last August Zeldman wrote up a short rant about what he thinks of table layouts in 2002, and why, in a number of cases, they still have a right to live.

    Enjoy: http://www.zeldman.com/daily/0802d.html#livedandlovedlikefrank

    - Henning

    Copy & paste the code below to embed this comment.
  38. I visited your site and your source code is different than what is explained. Please explain.

    Copy & paste the code below to embed this comment.
  39. The problem – do create a grid with Alan’s solution – I prefer it. But only to display the content on a PC. What happens when I want to display the content on a mobile phone (incl. another style sheet!)?

    On a PC screen I have the ‘menu-navigation’ on the left – so I have to write it at first in Alan’s ‘div’ (or td). On the mobile phone I want to have it on the bottom – or after the content. But how should I define the style sheet with Alan’s solution?

    With the absolute/relative solution it is possible (with newer mobile phones and if they have implemented it!). But the solution HOW-TO-DO it, is not very friendly and takes some experiments with different browsers, etc. and -> some other things are not working as I want:

    I want to have that the left navigation should have the FULL background to the bottom as the main part on the right. With blind tables no problem. With the absolute/relative display I have to use the JavaScript. But to slow – also on my fast machine (only Mozilla does the one-and-only job very fast).

    Copy & paste the code below to embed this comment.
  40. Hello,
    we are having the same problem in my company, where we need to industrialize much content because we now use XML technologies and database drivent content,
    the content needs to look very “hand made” though, so we are struggling … we have web designers that do very pretty hand made content, but the STEP from that content to industrialization is tricky, we don’t know who is most productive to adapt both worlds, if a Web Designer has to do and learn CSS and “blackbox” html, or if the programer have to take the designed content and try to simplify it,
    I wonder to know, how you and your team do that… We work a lot with templates now, but we want to be able to change those easily, we want content to be pretty enough, etc…

    So I was thinking of a method:

    - the creative designer designs a very good looking illustration
    – the tech designer sets a complete and enumerative page with all the “design objects” and their respective css/html
    – the programmers take and integrate all this and industrialize the process …


    The second step is confusing for us … so if somebody is having the same problems, please tell us how to handle …

    Have a nice day, bye!

    Copy & paste the code below to embed this comment.
  41. Hire a proffesional.

    The person must be able to communicate with the designers. He should listen to what their goals are and teach them how to achieve the desired result, explaining how and why, citing technical references.

    The other concern is the separation of business logic and presentation. The programmers must also work with the designers so the objective and procedure can be realized and a division of labor is decided early on.

    when business logic and presentation logic are separated, more flexibility will be gained. The result will be a more extensible system.

    Copy & paste the code below to embed this comment.
  42. > So I was thinking of a method:
    > – the creative designer designs a very good looking illustration
    > – the tech designer sets a complete and enumerative page with all the
    “design objects” and their respective css/html


    KPOCHA,

    I guess I would agree with Garrett above…

    However, I think the real problem is the definition of “creative” as in “creative designer”.

    An interactive page such as a web page is an application, and the person that applies creative flair, understanding of production restrictions, understanding of user behaviour and so on is an application designer. The term “web designer” should probably never have been coined.

    I expect an application designer to think in terms of “design objects” because that is the only way his ideas will become reality.

    It’s hard to bill clients for tasks that they don’t understand or perceive to be valuable. The reason there is so little quality client-side scripting (for example) out there is because it’s impossible to sell to a client (he’s seen the pretty photoshop layout, why does he have to pay extra for javascript development?). In practise, your “creative designer” and your “tech designer” are the same person.

    As Garrett says, hire a pro;-)

    Best
    -dug

    ps
    Happy new year all

    Copy & paste the code below to embed this comment.
  43. There’s this really irritating bug in IE6 that makes some pages laid out with floats repeat the last six or so characters on the page a couple of lines below the proper end of the page. This maddness does something like this:

    Copyright 2003, A List Apart

    t Apart

    Anybody else experiencing this? Both my CSS and XHTML validate and here they are:

    <body>
    <div id=“wrapper”>
    <!—****************************** WRAPPER ******************************—>

    <!—HEADER
    ******************************—>
    <div id=“header”>
    <div class=“content”>
    #header {

    padding: 0 0 0 0; margin: 0 0 0 0; float: left; display: inline; width: 100%; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/header—>

    <!—COL1
    ******************************—>
    <div id=“col1”>
    <div class=“content”>
    #col1 {

    padding: 0 0 0 0; margin: 0 0 0 0; float: left; display: inline; width: 220px; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/col1—>

    <!—COL2
    ******************************—>
    <div id=“col2”>
    <div class=“content”>
    #col2 {

    padding: 0 0 0 0; margin: 0 0 0 0; float: left; display: inline; width: 420px; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/col2—>

    <!—FOOTER
    ******************************—>
    <div id=“footer”>
    <div class=“content”>
    #footer {

    padding: 0 0 0 0; margin: 0 0 0 0; float: right; display: inline; width: 100%; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/footer—>

    <!—****************************** /WRAPPER ******************************—>
    </div> <!—/wrapper—>
    </body>
    </html>

    Copy & paste the code below to embed this comment.
  44. The problem was the comments. Take all comments out, bug fixed but bigger headache for colleagues! Maddness..

    Copy & paste the code below to embed this comment.
  45. Greetings,

    I have been currently working on the url site above which I entered in for “Your Url”. Anyhow I am fairly new at css and my problem is this, when I create a page layout in css within a certain resolution then the page is viewed in another higher or lower resolution the page looks different and is out of wack. How can I fix this so it will look the same at all resolutions……

    Thanks for you time,
    Lekeno

    Copy & paste the code below to embed this comment.
  46. Just implemented this code for the account managemene site of Citysearch.com. PDA is functional, WOW!!!!
    Compatible with Windows IE5.0+ NN6.0+

    - Doesn’t work in MacIE5 and not sure how to fix it yet.
    – Main Nav buttons display in opposite order of code? very weird.

    Any thoughts on the Mac issue would be welcome.

    Copy & paste the code below to embed this comment.
  47. Back in article 119 there was demonstation of how to use DIV and SPAN in place of the usual table format within Forms. Unfortunately there was no comment button at the bottom of the article for me to ask the following question, so forgive me if I use this article which is based roughly on the same subject ;-)
    In most forms the writer usually likes to employ some form of validation and check on compulsory entries.
    Now this is normally done with reference to the “name” elements in the table within the Form, my question is, how can this be accomplished using the DIV and SPAN method??

    Copy & paste the code below to embed this comment.
  48. I think the article was very informative; I being a navice at this has a resolution problem! My site does not show properly at a higher resolution and I don’t know what to do? Can anyone help me please?
    Thanks

    Copy & paste the code below to embed this comment.
  49. This is not about coding. This is about peole who care. And Dug, welcome to the club. Your article has brightened my day. For all of us that we are not hardcore coders, your approach is a really cool way to get our stuff done right.
    Thanks from Southern Chile.

    Copy & paste the code below to embed this comment.
  50. what’s the difference between SPAN and DIV?

    Copy & paste the code below to embed this comment.
  51. I’m building a page accoring to the XHTML Mobile Profile. Is it possible to use the “top” and “left” attributes for a div?

    Copy & paste the code below to embed this comment.
  52. I’ve used this techique, but finded some trubles on IE.

    I’ve coded a webpage, that has only div’s , and it works like i want to on mozilla, opera and netscape but on internet explorer doesn’t show the background of the forms divs, should be white.

    heres an example

    http://www.t6m.com/cssbug/

    and css is on

    http://www.t6m.com/cssbug/Event/scripts/real_event.css

    feel free to look

    thanks in advance

    Copy & paste the code below to embed this comment.
  53. I read this article and all I could find on the net about CSS, tables replacement by DIVs, and so on … To my minf this is too prematured to use such techniques with all browsers having problems with the standard. That’s why I don’t understand why you are all crazy about CSS. CSS is good for formatting, it’s not yet for layouts.

    I tried all the techniques to build a 3 columns layout. Each time when reducing the window width, the 3rd column goes under the 2nd one. I can’t even imagine producing a site where my visitors would say : this is not serious.

    So I will stay with tables until something serious comes up in browsers. This day, I will convert.

    Copy & paste the code below to embed this comment.
  54. I have read this article and CSS Design: Taming lists. Great info and very informative, but now I’m looking beyond for a new solution. I have my list of links on the left hand side of the web page, common. I’m got some content in the center of the page, and I want to wrap the bottom across the bottom of the content. We’ve all seen it before, and I know it can be done with pretty pictures: a nice bar on the left that bends at the bottom and juts to the right. Now the question, how do I do his with CSS?

    Copy & paste the code below to embed this comment.
  55. Well, I like Firebird for it is much lighter then mozilla/netscape but on the other hand it has the exactly same problems rendering my website. I don’t know if the problem is with IE/OPERA (for it displays correctly and the same in both) or with Firebird but since IE community is the largest and I personaly am using OPERA 7.11 I won’t switch until the rendering of CSS is improved.
    I do have all of them installed for experiments and I try really hard to get standard, and I am (according to XHTML transitional validator), but MOzilla/Firebird always position my divs a bit lower then it is supposed.

    Copy & paste the code below to embed this comment.
  56. http://exp.hicksdesign.co.uk/

    I just wouldlike to ask: Is this frame effect Standard?
    You see, I wanted to use that effect for same time now…

    Can you give me some light?

    Keep up the good work!

    May Peace Prevail!
    TEYATA OM MUNI MUNI MAHA MUNAYE SOHA

    Copy & paste the code below to embed this comment.
  57. http://exp.hicksdesign.co.uk

    I just wouldlike to ask: Is frame effect Standard?
    You see I wanted to use that effect for same time now…

    Can you give me some light?

    Keep up the good work!

    May Peace Prevail!
    TEYATA OM MUNI MUNI MAHA MUNAYE SOHA

    Copy & paste the code below to embed this comment.
  58. I read that the

    position: absolute

    doesn’t mean that the position (right: left: top: bottom:) is relative to the entire window, but it is relative to the innermost block containing the element! Is this right?

    I thought the
    position: absolute
    made these distances (right: left: top: bottom:) relative to the entire document, an the
    position: relative
    made these distances relative to the innermost block element!
    Was it wrong?

    if so, the html (with CSS) below should work fine, but it doesn’t!

    ———
    css:

    .container
    {
    background-color: Green;
    padding: 5px;
    }

    .content
    {
    background-color: Red;
    padding: 5px;
    width: 200px;
    right: 3px;
    position: absolute;
    }


    html:

    <html>
    <head>
    <link rel=“stylesheet” href=“provepos.css”>
    <title></title>
    </head>

    <body>
    <div class=“container”>
    <div class=“content”>here text</div>
    </body>
    </html>

    ——-

    as you can see, the .content div overlaps the border and goes outside the .container! what’s wrong?

    thanks.
    Mattia

    Copy & paste the code below to embed this comment.
  59. Hi,
    I have a fixed layout of 760 width. I’m using CSS2 to place the buttons in the top nav whose link’s and text come thru server side. Now it requires a line to stretch in the end and only appear when there are less links on the top navigation. As it is dynamic, the line also needs to stretch acordingly hence i don’t want the width for the line to be defined. Just now my code has it. Below is the code for both the HTML and CSS. Browser supported are IE5.0 and above and Netscape 6.1 and above. Please help as soon we are entering to UAT and i still don’t have a fix for it.

    HTML :
    <div id=“mastHeadContainer”>
    <div id=“button1”>About BP</div>
    <div class=“padding”></div>
    <div id=“button2”>Environment and Society</div>
    <div class=“padding”></div>
    <div id=“button3”>Product and Services</div>
    <div class=“padding”></div>
    <div id=“button4”>Careers</div>
    <div class=“padding”></div>
    <div id=“button5”>Press</div>
    <div class=“padding”></div>
    <div id=“button6”>Investors</div>
    <div class=“padding”></div>
    <div class=“bBottom”></div>
    </div>


    CSS:
    .button {
    color: #ffffff;
    background-color: #99cc00;
    height:15px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 8pt;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 2px 5px 2px 5px;
    display: block;
    float: left;
    border-top: 1px solid #99cc00;
    border-right: 1px solid #99cc00;
    border-left: 1px solid #99cc00;
    border-bottom: 1px solid #009900;
    }

    .button:Hover{
    color: #ffffff;
    background-color: #009F00;
    height: 15px;
    padding: 2px 5px 2px 5px;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #009900;
    border-top: 1px solid #009900;
    border-right: 1px solid #009900;
    border-left: 1px solid #009900;
    }

    .button1{
    color: #009900;
    background-color: #ffffff;
    height: 15px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 8pt;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 2px 5px 2px 5px;
    display: block;
    float: left;
    border-top: 1px solid #009900;
    border-right: 1px solid #009900;
    border-left: 1px solid #009900;
    }

    .padding{
    width: 2px;
    float: left;
    background-color: #ffffff;
    border-bottom: 1px solid #009900;
    padding: 0;
    margin: 0;
    height:20px;
    }

    .bBottom{
    border-bottom: 1px solid #009900;
    float:left;
    height: 20px;
    width: 29.5%;
    overflow: hidden;
    }

    .vertical6{
    padding: 0;
    margin: 0;
    height: 3px;
    overflow: hidden;
    }

    Thanks
    a

    Copy & paste the code below to embed this comment.
  60. no entiendo nada !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! buaaaaaaaaaaaaa

    Copy & paste the code below to embed this comment.
  61. Anu, try taking out the width parameter in the bBottom class. Leaves a samll tail in Moz Firebird when I do this.

    Copy & paste the code below to embed this comment.
  62. I do write some tosh. The small tail was, of course, the padding at the end of the buttons. I made the following work for me, you will need to modify the Hover to suit.

    body {
    margin:10px 10px 0 10px;
    padding:0;
    background:white;
    }

    .button {
    color: red;
    background-color: #CCC;
    height:18px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 10pt;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 2px 5px 2px 5px;
    display: block;
    float: left;
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    border-left: 1px solid blue;
    border-bottom: 5px solid black;
    }

    .padding {
    width: 5px;
    height: 18px;
    padding: 2px 0px 2px 0px;
    float: left;
    /* background-color: #ffffff; inherit ‘body’*/
    border-top: 1px solid white;
    border-bottom: 5px solid red;
    margin: 0;
    }

    Don’t need to call the bBottom class.

    Copy & paste the code below to embed this comment.
  63. Here is a slight modification of Justin’ script. I’m far from a Javascript/DOM expert, so here is my attempt to get it right.

    The difference in this script is it looks for a div element with a class named ‘container’. Inside the container you have your children div elements. The script calculates and sets the height for the container div, then goes finds the children div elements of the container and sets their height as well.

    In the body element put onload=‘balanceContainer()’ and thats it. It should work in IE 5.5+ and any Mozilla browser. Works in IE6/Mozilla 1.4, but haven’t tried it in Opera/Konqueror/Safari yet though.

    =================
    function parseContainer(div) {
    var tLength=0;
    var nLength=0;
    var childNode;
    var children=div.childNodes;
    for (i = 0; i < children.length; i++) {
    childNode=children.item(i);
    nLength=childNode.offsetHeight;
    if (nLength > tLength) { tLength=nLength; }
    }
    div.style.height = tLength + ‘px’;

    /* Parse again -> Insert offsetHeight to all children */
    for (i = 0; i < children.length; i++) {
    setSubContainer(children,tLength);
    }
    }

    function setSubContainer(subdiv,length) {
    if (subdiv.tagName == ‘DIV’) {
    subdiv.style.height=length + ‘px’;
    }
    }

    Copy & paste the code below to embed this comment.
  64. How about this…  Setup three main divs called top, middle and bottom.  The top div is absolute at the top of the page/screen, the middle is relative to the bottom of the top.  The bottom is relative to the middle.
    So the middle and bottom divs are relatively positioned vertically.

    Within the middle div (container), create the column divs (1 to 4).  The column divs are relatively positioned horizontally.  If we assume that each column div is evenly spaced then they would be 25% of the width of the container div.

    Is what I’ve described above impossible to do with divs, CSS, and without tables?  Is is possible for a div to automatically expand in the way that table cells do.  If divs can expand the way table cells do, then do relatively positioned divs, automatically readjust their based on other elements within a document… specifically other divs?

    I’m hoping the answers are yes, yes, and yes.  If not please explain.

    Copy & paste the code below to embed this comment.
  65. hmm isn’t all this suposed to be geared towards accesibility? some areas of info on this page (i.e. samples/examples of code) are spread all over the place. Just thought i’d let you kno and ask if anyone knows why.

    Copy & paste the code below to embed this comment.
  66. http://webforums.macromedia.com/dreamweaver/messageview.cfm?catid=189&threadid=735071

    I just discoverd that the topic how to get a DIV to expand its container DIV or other element is discussed here aswell. I posted the similar on the Macromedia forum this friday . One partial solution is to float the child DIVs but then I had to REMOVE absoulte positioning on those DIVs. Can you belive that! Flexibel layout consepts are something I have to deliver. And pushing the child DIVs around with padding and borders is not good.

    What is the Übersolution to follow folks?

    Erland FLaten, Lillehammer Norway.

    Copy & paste the code below to embed this comment.
  67. You can find an other solution at: http://www.s7u.co.uk/layouts/3cols.html

    This one works ok without the use of javascript!

    Copy & paste the code below to embed this comment.
  68. >>An interactive page such as a web page is an application.

    if this is the case why dont we have a browser that works like the adobe acrobat interface, removing navigation into a side bar.

    If you could somehow declare to a user agent what is your navigation or even a site index, ‘footer’ information and all that other standard stuff it’s display could be removed from the ‘web’, ‘pda’, ‘mobile phone’ screen.

    Why do we need to write an ‘application’ every time that we want to publish something? I thought the browser was supposed to be the application.

    Copy & paste the code below to embed this comment.
  69. i don’t know how to search ALA to see if the issue has been raised and it does kind of relate to my last point.

    Taking a wedge of text and shoving it in both a html page without formating and a pdf file with formating the resulting file sizes were 12k and 16k.

    I guess the extra code needed for the layout in the html and css would bump it up 2 or 3 k, and still would do well to get close to the amount of control you have laying out the pdf, and you have control of font face and sizing and printing.

    Is it not the case that pdf could be a viable alternative to html – especially for sites that are no more than a company brochure. For dynamic sites I dont know, I believe you can have forms in pdf? but I dont know how they can be generated on the fly.

    Copy & paste the code below to embed this comment.