CODEWITHSUNDEEP
htmlcsscss-tables
mat
mat

Reputation: 1629

Can't get DIV's equal in height

As simple as it normally is, for some reason I can't seem to get the same column heights for three divs in a row without using min-height or jQuery.

I am trying to use display:table on the main div and display:table-cell on the child's. I have no clue what is going wrong. I also tried other solutions, e.g. display:inline-block; and :before { content:"" }; as suggested in several other posts.

<div class="row">

<!-- 3 times in a row, other two blocks cut here for overview on SO -->

<div class="columns small-12 medium-4 large-4">
<div class="highlighted-contentblock">
    <a href="#" target="_blank">
        <div class="contentheader">
            <div class="sequence">
                1
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem
    </a>
</div>  
</div>
</div>

Fiddle

 .large-4 {
    width: 33.33333%;
display:table; }


.highlighted-contentblock
{
    background:gray;
    display:table-cell;
}

Fiddle

Upvotes: 3

Views: 109

Answers (6)

Richard Hogben
Richard Hogben

Reputation: 36

The Problem

It looks like the original issue was trying to apply table-cell to the class highlighted-contentblock instead of columns. The columns class is the first child of your row class and table-cell should be applied there.

Columns

You had display table on your columns (applied on the highlighted-contentblock class). I replaced that with table-cell applied to the columns class.

Spacing

Float removes margin so I removed that and used border spacing on your table instead.

Support

This works but not in IE 7. CSS tricks has more info.

Click run code snippet below to see it in action.

/* Foundation replacement */
.row {
    padding-bottom:10px;
    max-width:980px;
    margin:0 auto;
    display:table;
    border-spacing:0.9375rem;
 }

.columns {
    box-sizing:border-box;
    display:table-cell;
    background:gray;
 }

.large-4 {
    width: 33.33333%;
 }
<div class="row">
    
<div class="columns small-12 medium-4 large-4">
    
<div class="highlighted-contentblock">
    <a href="#" target="_blank">
        <div class="contentheader">
            <div class="sequence">
                1
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem
    </a>
</div>
    
</div>

<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
    
<div class="highlighted-contentblock">
    <a target="_blank" href=#>
        <div class="contentheader">
            <div class="sequence">
                X
            </div>
            <h2>
                Lorem ipsum <br/> Lorem ipsum
            </h2>
        </div>
        Lorem ipsum</a>
</div>

</div>

<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
    
<div class="highlighted-contentblock">
    <a target="_blank" href=#>
        <div class="contentheader">
            <div class="sequence">
                3
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a>
</div>

</div>

</div>

Upvotes: 2

ylerjen
ylerjen

Reputation: 4249

With floated element, the table/table-cell rendering is a bit difficult to render correctly...

If you can, remove the float element, and display them side by side with the table-cell.

The second problem of your code is that you have a background on the child element of the one that is rendered with a table-cell. So the height of all .column elements will be the same, but you won't see it with the background-color, because that property is setted to the child element that has its own height...

Here is an update of your fiddle without the float and with a border to show you that the height is correctly setted, but you don't see it because your bg-color is not applied to the right element :

http://jsfiddle.net/eaqr1b17/6/

/* Foundation replacement */
.row
{
    padding-bottom:10px;  
    display:table;
    border: 1px solid red;
 }
.columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    box-sizing: border-box;
    display: table-cell;
    border: 1px solid green;
}
.large-4 {
    width: 33.33333%; 
}
.highlighted-contentblock
{
    background:lightgrey;
}

Upvotes: 1

pistou
pistou

Reputation: 2867

Here is a jsfiddle : http://jsfiddle.net/nrnLbv14/

HTML :

<div class="container">
    <div class="row">
        <div class="column">content 1</div>
        <div class="column">content 2</div>
        <div class="column">content 3</div>
    </div>
</div>

CSS :

.container {
    display:table;
    /* just styling to show it works */
    border-collapse: separate;
    border-spacing: 10px;
    background-color: gray;
}
.row {
    display:table-row;
}
.row .column {
    display:table-cell;
    background-color: #fff;
    width: 33.33%; // If you want all 3 columns equal width
}

Upvotes: 1

Harryaars
Harryaars

Reputation: 25

I think this is what you need:

HTML:

<div class="wrap">
<div class="row">
    <div class="cell">
    Lorem    
    </div>
    <div class="cell">
    Lorem impsum more text
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

And for the css:

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
.cell{
    width: 33.33%;
    display: table-cell; 
    background-color: #0f0;
}

if you want to see it running click here Fiddle

Upvotes: 1

reyaner
reyaner

Reputation: 2819

For your markup you have do to it like this:

http://jsfiddle.net/rvos3hx3/

/* Foundation replacement */
 .row {
    padding-bottom:10px;
    max-width:980px;
    margin:0 auto;
    display:table;
}
.columns {
    position: relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    box-sizing:border-box;
    background:gray;
    display:table-cell;
}
.large-4 {
    width: 33.33333%;
}

Upvotes: 1

James King
James King

Reputation: 1917

Your html is a bit messy to be honest. You want to be following this simple structure:

<div class="row">
    <div class="col">Content</div>
    <div class="col">Content</div>
    <div class="col">Content</div>
</div>

And then set a few simple CSS rules 

.row {
    display: table;
}
.col {
    display:table-cell;
    width:33.33%;
}

The crucial thing here is setting the width of your table cells.

I have updated your fiddle to show this in action http://jsfiddle.net/eaqr1b17/5/

Upvotes: 1

Related Questions