Hacker News Reader

Comment by nikatwork | Hacker News Reader

> 1x1.gif let you push elements all around the page effortlessly. To this day it is the only way to vertically center elements.

False, dynamic vertical centering has always been possible with tables:

  <table><tr>
  <td valign="middle">dynamically vertically centered</td>
  <td><img src="1x1.gif" height="2000" width="1"></td>
  </tr></table>

This is something CSS still can't seem to do dynamically except with table-emulation, which, you know, kind of defeats the whole fucking purpose of CSS (and isn't backwards compatible anyway). Seeing how much people decry tables as the antizalgochrist (guess what zealots: layout divs and lists also aren't semantic) I'm surprised this hasn't been fixed yet. But I don't care anymore since I moved back to app dev and my life got 100x less painful.

Here's something else CSS still can't do AFAIK:

  <table width="80%"><!-- dynamic --><tr>
  <td width="300">fixed"</td>
  <td width="*">dynamic</td>
  </tr><table>

View on HN

One pedantic point [what, here on HN??!!] about your statement "layout divs and lists also aren't semantic"... the difference is that divs are never semantic, and they're not supposed to be. Whereas table are semantic and impart meaning on what the kind of content is. So, yeah, divs aren't semantic and that's exactly why they're more appropriate than tables for layout.

I hear the argument that <table>s should only hold tabular data, but (a) that is a convention not a rule and (b) frankly content and layout are so horribly muddled in HTML that I believe in a pragmatic approach with clean, minimal, backwards-compatible code and no fragile hacks. If that means using a couple of layout tables then so be it.

What really grates is that the same people will then often use a <ul> to make a hover menu, which is completely hypocritical.

Try loading that website in a text only browser. All of a sudden those ul>li navigations start to make sense.

Accessibility anyone?

Take a look at flexbox. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

-- Here's something else CSS still can't do AFAIK:

-- <table width="80%"><tr>

-- <td width="300">fixed"</td>

-- <td width="*">dynamic</td>

-- </tr><table>

Actually, it can. I did it for you:

Image: http://i.imgur.com/l5GPLNC.png

Source: https://gist.github.com/Imdsm/9226944

One more without calc for older browsers:

.container {width: 80%;} .left {float:left; width: 300px; background: yellow;} .right {margin-left: 300px; background: red;}

I do:

    .thing {
      position: relative;
    }
    .thing .child {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      margin-top: -25px; /* half of height */
    }

Or else if it's text I just make the line-height the same height as the parent element. That keeps things vertically centred :)

A quick google reveals this for IE8+ everything else.

http://css-tricks.com/centering-in-the-unknown/

Not terrible but still a hack. Should just be a simple way of doing this by now... Still, this technique is better than a spacer gif!

Vertical centering with CSS, without table emulation: http://jsfiddle.net/mBBJM/1/

IIRC that technique only works with fixed heights so it is useless for most layout scenarios, and is why I specified "dynamic" in my comment.

CSS is perfectly fine for fixed size layouts but it completely sucks for dynamic ones, especially if you want to mix fixed and dynamic elements. Tables OTOH handle these layout scenarios simply, concisely and without hacks.

Fixed widths and heights....it is amazing that [as it seems] no one in the entire w3c or building the browsers know people that write applications for multiple languages, different directional settings (right-to-left vs left-to-right), and even verticalization (replacing terms within the product depending on the customer). Things that are trivial in native applications back in the early 90s still can't be done easily in 2014. Honestly, it is pathetic.

Given that HTML was never designed to be an application development language is that surprising ?. Talk about banging a square peg into a round hole!!!

Javascript was never intended for building large applications, but with the JIT-improvements of the last years, it works.

CSS is really botched and holding us back at this point. Fortunately it is slowly improving (eg. * { box-sizing: border-box } and the flex-box), but still...

Only works if you have a fixed height for what you're centering though.

Reply on news.ycombinator.com