6 ms·

I've found the best way of equalizing heights/widths is just using display:table/table-row/table-cell. It handles resizing (responsiveness) and doesn't require

I've found the best way of equalizing heights/widths is just using display:table/table-row/table-cell. It handles resizing (responsiveness) and doesn't require any JavaScript.

degenerate 14y ago
Can you elaborate or share a link? This sounds great.
- uptown 14y ago
  Read this: http://www.vanseodesign.com/css/tables/ http://www.vanseodesign.com/css/tables/
windsurfer 14y ago
...isn't also basically using a table?
rquantz 14y ago
So you're back to your layout being entirely dependent on your markup? wasn't this what CSS layouts were supposed to get away from?
- crazygringo 14y ago
  Well that's what CSS was supposed to do, but since it never gave us a way of equalizing heights except for tables... Then tables are obviously the way to go. Resorting to JavaScript hacks when HTML/CSS provides you with a solution, despite it being "non-semantic" in some people's eyes, seems unnecessary. (Of course, there are cases where tables won't work either, and JS is your only option.)
- Osiris 14y ago
  As opposed to your layout being entirely dependent on JavaScript? I'm not sure I see the difference between requiring JavaScript code to manipulate the layout versus using CSS to do the same. Why is one better/worse than the other?
- Kiro 14y ago
  I think 2013 will be the year where markup based layout sees a comeback. No-one is using CSS the way it was intended to anyway.
graue 14y ago
As with <table> markup, wouldn't that prevent content from reflowing? I might be missing something, but normally when I do this, I want the number of elements per row to vary depending on what fits, whether that's 10 elements on a large screen or 3 on a phone. Hardcoding the assumption that there will always be X per row (say, 5) seems to miss the point.
- cheald 14y ago
  You can use media queries to fix this. It's not a perfect solution, but it's pretty decent.
atirip 14y ago
Yes, that's the correct CSS way. Besides, this plugin does not work with box-sizing border-box. Which is unacceptable at (almost) 2013. But if in need to do this kind of things with Javascript, please take a look at https://github.com/atirip/jquery.pp https://github.com/atirip/jquery.pp This repo is not solely of dimensions, but you will find many useful and normalized (all your tags may even be mixed of content-box and border-box) dimension methods inside, both to measure and to set dimensions.

I've found the best way of equalizing heights/widths is just using display:table/table-row/table-cell. It handles resizing (responsiveness) and doesn't require any JavaScript.

degenerate 14y ago

Can you elaborate or share a link? This sounds great.

uptown 14y ago
Read this: http://www.vanseodesign.com/css/tables/ http://www.vanseodesign.com/css/tables/

windsurfer 14y ago

...isn't also basically using a table?

rquantz 14y ago

So you're back to your layout being entirely dependent on your markup? wasn't this what CSS layouts were supposed to get away from?

crazygringo 14y ago
Well that's what CSS was supposed to do, but since it never gave us a way of equalizing heights except for tables... Then tables are obviously the way to go. Resorting to JavaScript hacks when HTML/CSS provides you with a solution, despite it being "non-semantic" in some people's eyes, seems unnecessary. (Of course, there are cases where tables won't work either, and JS is your only option.)
Osiris 14y ago
As opposed to your layout being entirely dependent on JavaScript? I'm not sure I see the difference between requiring JavaScript code to manipulate the layout versus using CSS to do the same. Why is one better/worse than the other?
Kiro 14y ago
I think 2013 will be the year where markup based layout sees a comeback. No-one is using CSS the way it was intended to anyway.

graue 14y ago

As with <table> markup, wouldn't that prevent content from reflowing? I might be missing something, but normally when I do this, I want the number of elements per row to vary depending on what fits, whether that's 10 elements on a large screen or 3 on a phone. Hardcoding the assumption that there will always be X per row (say, 5) seems to miss the point.

cheald 14y ago
You can use media queries to fix this. It's not a perfect solution, but it's pretty decent.

atirip 14y ago

Yes, that's the correct CSS way. Besides, this plugin does not work with box-sizing border-box. Which is unacceptable at (almost) 2013. But if in need to do this kind of things with Javascript, please take a look at https://github.com/atirip/jquery.pp https://github.com/atirip/jquery.pp This repo is not solely of dimensions, but you will find many useful and normalized (all your tags may even be mixed of content-box and border-box) dimension methods inside, both to measure and to set dimensions.