CODEWITHSUNDEEP
htmlcss
Pa3k.m
Pa3k.m

Reputation: 1166

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 wanted to do is match the height regardless of which on is longer. I've already tried putting height:100%; on both of em but still doesnt work.

Thanks!

Upvotes: 2

Views: 910

Answers (5)

Coded Container
Coded Container

Reputation: 863

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. 

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

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

Upvotes: 0

Anthony
Anthony

Reputation: 37065

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.

Upvotes: -1

Sunilosys
Sunilosys

Reputation: 19

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

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

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

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

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

Upvotes: -1

DreadPirateShawn
DreadPirateShawn

Reputation: 8412

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.

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382274

Remove the floating and use

display: table-cell;

Demonstration

Upvotes: 7

Related Questions