Krueger Designs Web designer with the developer know-how.

Same Height Bad-boy Layout

5 Comments

Here’s How It All Began

Recently I rebooted my website, KuregerDesigns.com. I wanted to make it responsive, portray industry standard practices of coding, and it needed a flexible same height column layout. I built my WordPress theme on HTML5, CSS3, and used the LESS preprocessor. It was extremely enjoyable and I learned a few more useful approaches to responsive/fluid layouts.

I Hit A Wall

One thing I did run into with making a responsive site with no max-width was my columns would change height the more they expanded. Not only that but I needed my columns to have the same height so the background image of my left columns wouldn’t stop short of the full height. I tried a few methods, javascript and Faux Columns. The Javascript wasn’t fast enough (I had a second or two delay before my columns became the same height) , and would resize the height of the divs when the window was readjusted. Where as the Faux Columns was working but when I used box-sizing it all fell apart.

I Started Hacking Out My Layout

If both the javascript and Faux Columns weren’t going to work I needed to figure something else out. I went strait to codepen.io and started playing around with a few ideas. I new what I wanted was possible using tables, but I didn’t want to be the laughing stalk of the net by rebooting my Website and using tables for my new layout. Enter my Bad-boy Layout, it uses HTML5 tags and changes the display to make the right and left columns behave like a table-row with 2 table-cells. My only last worry was browser support. Thankfully it works in IE8, 9, 10, Firefox, Chrome, and Safari. It probably works in other modern browsers too.

Check out this Pen!

If you’re interested and would like to check it out, here is the link to the codepen. Here’s a link to a fullpage example. Please let me know what you think about it, if I am way off doing this, or do you feel this is an acceptable approach?

  • Joshua Andrew Jourdain

    i am using a less compiled grid-system based on semantic.less, and this doesn’t fix the unequal column height issue…

    • http://twitter.com/KruegerDesigns Adam Krueger

      Sorry to hear this Joshua, perhaps you could email me a link to the layout. I suspect the markup differs, which is key to making this bad-boy layout work. Email me at adam@kruegerdesigns.com, or message me on Google hangouts.

  • http://blog.jonphillips.ca/ Jon Phillips

    Hey Adam, thanks for putting this together, mostly works great from what I could test.

    There’s just one thing that didn’t work out for me – when you add a padding value to the article content, that same padding value also gets applied to the sidebar since they’re both set to display: table-cell and their parent container is set to display:table-row.

    Obviously if you have X padding in your content area, you don’t necessarily want the same padding in the sidebar (not just padding, margin does this too). So in order to fix this, applying a vertical-position:top to the .content and .sidebar seems to fix:

    .content, .sidebar { display: table-cell; vertical-align: top; padding: 0 1.5em; }

    http://codepen.io/jonphillips/pen/eAlmG

    Cheers!

    • http://twitter.com/KruegerDesigns Adam Krueger

      Thank you Jon. I hadn’t thought about this, this is a great addition to the layout. I appreciate the feedback and time you took checking it out!

  • Swami Atma

    To this most common problem, and of all the solutions out there, this one is the most elegant, by far.

    This issue reflects poorly on CSS, which I cherish otherwise.