Can't increase DIV in height

As is usually the case, for some reason I cannot get the same column heights for three divs in a row without using min-height

or jQuery.

I am trying to use display:table

in the main div and display:table-cell

on the child. I have no idea what's going on. I have also tried other solutions, eg. 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

+3


source to share


6 answers


Problem

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

Columns

You had a display table in your columns (applies to highlight-contentblock class). I replaced it with table-cell applied to the column class.

Spacing

Float removes the field, so I removed that and used table spacing instead of table.



Support

This works, but not in IE 7. CSS tricks have more information .

Click below the run code snippet 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>
      

Run codeHide result


+2


source


Your html is a little messy to be honest. You want to follow 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 some simple CSS rules



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

      

This is where setting the width of your table cells is important.

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

+1


source


With a floating item, rendering the table / table-table is a bit tricky to get it right ...

If you can, remove the float element and show them next to the table cell.

The second problem with your code is that you have a background for the child of the one that is displayed with table-cell. This way the height of all .column elements will be the same, but you won't see it with a background color because this property is set to a child with its own height ...

Below is an update to your fiddle without a float and with a border to show the height is set correctly, but you can't see it because your bg color is not being 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;
}

      

+1


source


For your markup, you would do 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%;
}

      

+1


source


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 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 how it works click here. Fiddle

+1


source


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
}

      

+1


source







All Articles