5 ms·

Next week: The complete guide to sticky footers! It's unbelievable just how annoying CSS can be for seemingly simple things.

• sopooneo 13y ago
  I may be using words incorrectly, and I'm not positive you can even make the distinction, and I am happy to stand corrected, but it always seemed to me that CSS was fine for style, but terrible for layout. So I think I'm agreeing with you.
  • jebblue 13y ago
    Right, to me plain HTML tables are great for overall master page layout yet it seems everything I've read and the few web geniuses I've met will deride using them over CSS.
    • icedchai 13y ago
      Same here. It's amazing how convoluted "modern" CSS can be compared to simple, reliable tables.
      • rimantas 13y ago
        Layout with CSS is really much simpler than doing that with tables.
    • statictype 13y ago
      Generally I agree that too many people have a fetish about avoiding tables when it's clearly the right tool for the job. But I've definitely been bitten by using them. Table layouts don't play well with other CSS properties.
      • voltagex_ 13y ago
        Depending on how you do the layout it also may not play well with screenreaders.
        • sopooneo 13y ago
          Why do people care about screen readers? Is it because they are good people and want to make sure sight-impaired visitors are able to access their content? Or is it because they have contracts that require 508 compliance?
          • voltagex_ 13y ago
            I guess it's a good question. At a recent conference it [website accessibility] was described as the digital equivalent to putting a ramp in at your door. Where I work at the moment I'm required to comply with WCAG2 AA at a minimum.
          • jimhart3000 13y ago
            Why does it matter why they care? Does doing it for 508 compliance somehow make it less important? It's simply the right thing to do.
            • sopooneo 13y ago
              I ask purely out of curiosity, not because I think the answer should affect my, or anyone else's, actions.
      • buttsex 13y ago
        If you are using HTML tables for layout then you definitely aren't using the right tool for the job. If it isn't tabular information then it doesn't belong in a table.
        • ahallock 13y ago
          You can easily get around that by using `display: table` and `display: table-cell` So you have your semantic HTML elements, if you're into that sort of thing, and flexible layout options, like `vertical-align: middle`.
    • unclebucknasty 13y ago
      Exactly. I mean, I get the part where people are against layout with tables in principle. I just hate the part where they act like CSS is a good alternative in practice.
      • robmcm 13y ago
        Even better is to draw everything in a canvas!
        • unclebucknasty 13y ago
          To that point, no human should have to work directly with CSS for layout!
  • cabalamat 13y ago
    > but it always seemed to me that CSS was fine for style, but terrible for layout. I think you're right there. When I've set colours, fonts, etc in CSS it's always worked first time, but getting layout right it feels like I'm fighting against the system all the time. I wonder if it wouldn't make sense to build a tool that abstracts out the layout part of CSS? I once built a tool in python that lays out Tk/Tkinter GUIs[1] which I may have a go at adapting to produce CSS/HTML output. 1: https://github.com/cabalamat/parrot https://github.com/cabalamat/parrot
  • stormbrew 13y ago
    I think the issue, in terms of CSS being bad for layout, is that it tries to treat the logical structure of the document as the layout structure. If there were a way to restructure the document and then apply CSS to it a lot of things would get a lot easier and separation of content and presentation could be more realistic. XSLT was interesting in providing some of this kind of restructuring power, but was far too heavyweight for pure layout manipulation. Of course, this is also what flexbox tries to do and I think we'll be groaning about its lack of relative power in this area in the future when it's more established. It feels like a bandaid to me.
• jebblue 13y ago
  This is as close as I can get without HTML tables: <html> <head> <title>Testing making a footer with CSS</title> </head> <body> <div id="divpage"> <div id="divcontent" style="overflow: auto; height: 60%;"> This is the content area. </div> <div id="divfooter" style="overflow: auto; height: 30%;"> This is the footer. </div> </div> </body> </html>
  • adwf 13y ago
    I usually go with the footer height 50px, content min-height 100%, bottom-margin -50px. Generally works, but still has some edge cases that can throw it for a loop. Whereas what I instinctively want to do is something more like a conditional absolute positioning. If the content fits above the fold, then have the footer absolute at bottom:0. Else, have it relative to the content div. It can be done in JS of course, but I feel it should be a lot easier to do in CSS.
• nfoz 13y ago
  Honestly, please don't use sticky footers. I curse CSS not because that's difficult, but because it's possible. :/
• tripzilch 13y ago
  In the case of sticky footers I'm all for the adage "if it's annoying to use, it should be annoying to style".