Equal height adjacent divs WITH A fluid grid and fixed gutters

Question

I have seen multiple questions and answers on here about fluid grids with fixed gutters. I have also seen a lot about equal-height fluid-width div columns. I am trying to do both at the same time and have found no concrete solution.

I was able to make it work, but my solution seems a little 'hacky' and unstable. Below is my markup with jsFiddle link. Is this a safe way to accomplish equal-height fluid-width divs with fixed gutters, or do you recommend a better solution? I have been trying to improve on my semantics and writing robust code lately...

**Browser Support only requires IE9+

jsFiddle

HTML

<div class="grid">
    <div class="grid_01">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="gutter"></div>
    <div class="grid_01">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

CSS

.grid {display:table; padding:20px;}
.grid_01 {
    display:table-cell;
    width:50%;
    padding:20px;
    border-top:4px solid #a085c6;
    background:#ffffff;
    -moz-box-shadow:0px 1px 1px 0px #717171;
    -webkit-box-shadow:0px 1px 1px 0px #717171;
    box-shadow:0px 1px 1px 0px #717171;
}
.gutter {width:20px;}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

My biggest concern is the empty gutter div. I appreciate any constructive feedback.

Answer 1

You can do this with flexbox. Set your grid items to have a margin-right: 20px (or whatever you want your gutter to be), then set the last-child grid item margin-right to 0.

See the fiddle: http://jsfiddle.net/xLR3x/

Answer 2

you may use : border-spacin:20px; if that fits your need.

Else , You may add an empty table-cell element via :before, except for :first-child.

.grid >div:before {
content:'';
display:table-cell;
width:20px;
}
.grid >div:first-child:before {
display:none;
}

or

.grid >div:not(:first-child):before {
content:'';
display:table-cell;
width:20px;
}

Answer 3

Improving on jbenjohnson's answer, I have spent some time trying to achieve the same result and (I think) I managed something nice. I use negative margins on the container div to realign the content with your general layout and some half-sized gutter margins inside to keep everyone evenly spaced.

The improvement here, comparing to jbenjohnson's answer is that even on grids using flex-flow: wrap, the margins don't break on the right side (which is crucial for responsive layouts).

Let's clean up OP's HTML to get rid of the annoying gutter-divs:

<div class="grid">
    <div class="grid-cell">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="grid-cell">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

Now let's apply some flexbox-loving...

I'm using a 20px gutter like OP, so my margins are 10px and -10px values.

.grid {
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px; // Optional, see NOTE 3
    padding-right: 10px;
}
.grid-cell {
    width: 50%; // that's not usually recommended, flex-basis is better.
    margin-left: 10px;
    margin-right: 10px;
}

JS Fiddle

NOTE 1 - This is not a hack. W3C clearly defines the use of negative margins for exactly these cases. This is probably the most "compliant" answer to OP's question.

NOTE 2 - I also recommend getting rid of the width properties and swapping them with flex-basis values. They are much more reliable and predictable in a flexbox context. See the reference for flex-basis from the excellent Guide to FlexBox by Chris Coyier.

NOTE 3 - Without the horizontal paddings, the grid would align to the extreme sides of your layout (which is cool, especially with fixed-width layouts). I have kept them in to copy OP's layout.