[Pro] How do I get 3 Boxes Next to Each Other Stay the Same Height

Freeway
21

Hi Erni,

It really wasn’t my intention to just make a copy of your work!
I need different columns of the same height and saw this post.
I was hoping that I could find out what I did wrong in the project I’m making based on the GridMeister tutorial from Thomas.

Best regards,
Bart

freewaytalk mailing list
email@hidden
Update your subscriptions at:

22

The table-approach could work in theGrid (untested) as follows:

Grab the item I’m used to call #area-whatever and add there:

display:table

Go one hierarchy deeper and grab the #module-whatever, set this to:

display:table-row

Finally, to each of the #grid-whatever it would require

display:table-cell

This should make TheGrid equal heights.

Move each of those extra styles one level deeper if required. That would be the things I’d try first. I longer thought if the table-method is stinky (as Ernie once said) - but by thinking deeper, I’d say "No it isn’t - it’s fine, cause the basic structure is still inline DIV - just flavored by a bit of CSS (non-semantic). But I may fail - as well as my description above may fail.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

23

Hi Thomas,

Thank you, it seems to be a good solution.

Best regards,
Bart

freewaytalk mailing list
email@hidden
Update your subscriptions at:

24

OK guys - perhaps a note to all followers regarding TheGrid screencasts:

The table approach isn’t really working in TheGrid design-surrounding. This has mainly to do with margins (even negative on certain items) which will be deleted/removed by display:table. So we’d destroy our hard constructed wireframe (it’s STINKY :-)))))

I tend to recommend the

padding-bottom: 9999px; 
margin-bottom: -9979px /*The padding adjustment*/

Basically the numbers looking weird, right? Some math will show, that we finally talk about a padding (bottom) of 20px right? This does make sense to readjust - because the regular padding bottom we apply by inspector will be overwritten and set to 0px by not respecting the adjustment. So the adjustment is nothing else than giving the padding-bottom value back as expected.

Important to mention:

A parent item requires necessarily

overflow:hidden

So please go back to Ernie’s excellent article - I’m talking about Tim’s method:

http://cssway.thebigerns.com/workbench/css-even-column-cookoff/

Give it a go - failing makes you even smarter.
Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at: