CODEWITHSUNDEEP
htmlcss
user1943020
user1943020

Reputation:

How can I make display: table-cell be the same height with my CSS?

I have the following HTML:

<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
    <div style="display: table-row">
        <div class="grid_6" style="display: table-cell;">
            <div class="block-border">
                <div style="background-color: red; height: 100px;"></div>
            </div>
        </div>
        <div class="grid_6" style="display: table-cell;">
            <div class="block-border">
                <div style="background-color: red; height: 200px;"></div>
            </div>
        </div>
    </div>
</article>

I am using display: table-row because I heard that this would make my DIVs work like table cells and I was wanting the DIVs to be the same height. However it seems like the first grid_6 grid has a small height while the second has at least 100px. How can I make it fill to be the same height?

Here's an example: fiddle

Upvotes: 2

Views: 1634

Answers (2)

Martin Yankov
Martin Yankov

Reputation: 351

Both grid_6 elements are the same height. The reason why you see one red rectangle larger than the other is you are coloring the inside divs. If you put the color on the grid_6 elements - they are the same. http://jsfiddle.net/A7yXc/

<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
    <div class="grid_6" style="display: table-cell; background-color: red;">
        <div class="block-border">
            <div style="height: 100px;">das</div>
        </div>
    </div>
    <div class="grid_6" style="display: table-cell; background-color: red;">
        <div class="block-border">
            <div style="height: 200px;">das</div>
        </div>
    </div>
</div>

Upvotes: 0

Shail
Shail

Reputation: 3649

<div class="block-border">
        <div style="background-color: red; height: 100px;"></div>

You have set the height of second element i.e Height = 100px .

Set the height to both the div elements .

Upvotes: 1

Related Questions