4 ms·

> 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 centeri

> 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%"><tr> <td width="300">fixed"</td> <td width="*">dynamic</td> </tr><table>

michaelw 13y ago
Take a look at flexbox. http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/
flavor8 13y ago
Vertical centering with CSS, without table emulation: http://jsfiddle.net/mBBJM/1/ http://jsfiddle.net/mBBJM/1/
- nikatwork 13y ago
  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.
  - fokov 13y ago
    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.
    - spiralpolitik 13y ago
      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!!!
      - iSnow 13y ago
        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...
- ryanbrunner 13y ago
  Only works if you have a fixed height for what you're centering though.
andy_ppp 13y ago
A quick google reveals this for IE8+ everything else. http://css-tricks.com/centering-in-the-unknown/ 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!
jordanlev 13y ago
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.
- deleted 13y ago
  [deleted]
- deleted 13y ago
  [deleted]
- nikatwork 13y ago
  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.
  - imdsm 13y ago
    Try loading that website in a text only browser. All of a sudden those ul>li navigations start to make sense. Accessibility anyone?
  - deleted 13y ago
    [deleted]
err4nt 13y ago
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 :)
imdsm 13y ago
-- 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 http://i.imgur.com/l5GPLNC.png Source: https://gist.github.com/Imdsm/9226944 https://gist.github.com/Imdsm/9226944
- Chupachupski 13y ago
  One more without calc for older browsers: .container {width: 80%;} .left {float:left; width: 300px; background: yellow;} .right {margin-left: 300px; background: red;}

michaelw 13y ago

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

flavor8 13y ago

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

nikatwork 13y ago
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.
- fokov 13y ago
  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.
  - spiralpolitik 13y ago
    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!!!
    - iSnow 13y ago
      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...
ryanbrunner 13y ago
Only works if you have a fixed height for what you're centering though.

andy_ppp 13y ago

A quick google reveals this for IE8+ everything else. http://css-tricks.com/centering-in-the-unknown/ 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!

jordanlev 13y ago

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.

deleted 13y ago
[deleted]
deleted 13y ago
[deleted]
nikatwork 13y ago
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.
- imdsm 13y ago
  Try loading that website in a text only browser. All of a sudden those ul>li navigations start to make sense. Accessibility anyone?
- deleted 13y ago
  [deleted]

err4nt 13y ago

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 :)

imdsm 13y ago

-- 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 http://i.imgur.com/l5GPLNC.png Source: https://gist.github.com/Imdsm/9226944 https://gist.github.com/Imdsm/9226944

Chupachupski 13y ago
One more without calc for older browsers: .container {width: 80%;} .left {float:left; width: 300px; background: yellow;} .right {margin-left: 300px; background: red;}