How To Make 2 Divs Inherit The Height Of Which Ever Div Has Higher Height Inside A Parent Div?

I'm having trouble matching the height of 2 divs inside a parent div. It's kinda hard for me to explain to I made it on Jsfiddle. http://jsfiddle.net/DSQpd/ Basically, what I wante

Solution 1:

Remove the floating and use

display: table-cell;

Demonstration

Solution 2:

I know this may not be the most elegant or popular answer, but one extremely straightforward way to do this is to use a <table> approach with two cells in a single row. Easy to maintain, works cross-browser, etc.

Solution 3:

Tables are ugly. I would also consider using the magic of flexbox for each of your items. The only issue is if you are pulling in dynamic data with Bootstrap or another framework. Then it will make more sense to use the 'clearfix' class every x element or else you will be making more code for yourself. Then again you could always just use JavaScript to determine the highest element and duplicate this across your divs.

<divid="parent"><divclass="child"></div><divclass="child"></div><divclass="child"></div></div>

#parent { display: flex; align-items: stretch; }
#child { display: flex;}

Solution 4:

Add margin-bottom:-1000px and padding-bottom:1000px, container div should have overflow:hidden

.post {
            width:685px;
            margin:0015px0;
            float:left;
            background:#EEE;
        overflow:hidden;
        }

            .tags {
                width:250px;
                height:100%;
                padding:05px05px;
                float:left;
                background:#273a47;
                color:#FFF;
                padding-bottom: 1000px;
                margin-bottom:-1000px;
            }

            .content {
                width:415px;
                float:right;
                padding:05px05px;
                background:#069;
                color:#FFF;

          padding-bottom: 1000px;
                margin-bottom:-1000px;
            }

Solution 5:

The correct way to implement this with CSS3 is with flexible boxes. For your example, adding the following achieves the intended result:

.post {
   display: flex;
}

Here is your fiddle with the update above.