Hacker News Reader

Comment by adwf | Hacker News Reader

Next week: The complete guide to sticky footers!

It's unbelievable just how annoying CSS can be for seemingly simple things.

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.

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.

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.

Same here. It's amazing how convoluted "modern" CSS can be compared to simple, reliable tables.

Layout with CSS is really much simpler than doing that with tables.

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.

Even better is to draw everything in a canvas!

To that point, no human should have to work directly with CSS for layout!

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.

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.

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`.

Depending on how you do the layout it also may not play well with screenreaders.

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?

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.

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.

I ask purely out of curiosity, not because I think the answer should affect my, or anyone else's, actions.

> 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

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>

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.

In the case of sticky footers I'm all for the adage "if it's annoying to use, it should be annoying to style".

Honestly, please don't use sticky footers. I curse CSS not because that's difficult, but because it's possible. :/

Reply on news.ycombinator.com