CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Weier
Weier

Reputation: 1429

Contained div with same height on 3 bootstrap columns

I am trying to have 3 div with same height, those div being themselves in 3 bootstrap columns which are the same height.

I have seen other answers regarding how to get three columns the same height, and this is working for the outer div (the columns). The thing is I want a div in each of these columns (so as to have a different background color) and those div should still be the same height. I haven't found a working solution for that kind of configuration.

That example should be clearer:

HTML:

<div class="container">
    <div class="row marketing">
        <div class="col-md-4">
            <div class="vignette">
                <h2>Foo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="vignette">
                <h2>Bar</h2>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="vignette">
                <h2>Baz</h2>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div><!-- //row -->
</div> <!-- //container -->

CSS:

div.marketing {
    display: table;
    height: 100%;
}

.marketing h2 {
    color: #ffffff;
    font-family: "Abel", Arial, sans-serif;
    font-weight: 900;
    font-size: 40px;
}

.marketing p {
    color: #ffffff;
    font-family: "Abel", Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
}

.marketing > div[class*="col-"] {
    float: none;
    display: table-cell;
    padding: 10px 10px;
    height: 100%;
}

@media screen and (max-width: 479px) {
    div.marketing {
        display: block;
    }
    .marketing > div[class*="col-"] {
        display:inline-block;
    }
}

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 3px 10px;
    height: 100%;
    vertical-align: top;
}

It produces the expected output on Firefox but the colored blocks are not the same height on Chrome/Safari: the third column inner div is either taller or smaller than the two others depending on your screen resolution.

See the following fiddle with the code above and bootstrap 3.3.4: https://jsfiddle.net/ch5zgexm/1/

Upvotes: 0

Views: 160

Answers (4)

MaGiO
MaGiO

Reputation: 507

try to add this css code:

  box-sizing: content-box;

to vignette class like this:

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 3px 10px;
    height: 100%;
    vertical-align: top;
    box-sizing: content-box;
}

Upvotes: 0

Christina
Christina

Reputation: 3732

In your CSS you have set display: table-cell for the column divs, however the containing div (div.marketing) has display: table. When you use display: table-cell on an element you are supposed to nest it inside an element with display: table-row. The fact that you didn't do this is what causes unpredictable behaviour cross-browser, since every browser attempts to render the page in what it thinks is the "best" way.

Now, on to the solution. What you need to do is correct the display of div.marketing to table-row. This will cause the .vignete divs to not use the full height of the column divs, however you can easily fix this by using display: inline-block for the .vignete.

See the updated JSFiddle

Upvotes: 2

crazymatt
crazymatt

Reputation: 3286

I think the simplest solution would be to add display: inline-block to the vignette class.

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 3px 10px;
    height: 100%;
    vertical-align: top;
    display: inline-block;
}

You can see your updated Fiddle here. Hope that helps.

Upvotes: 3

Sudip
Sudip

Reputation: 2051

Update the Padding top/bottom (tested in chrome in the Fiddle)

.vignette {
    background: #666688; /* fallback color */
    background: rgba(102, 102, 136, 0.5);
    padding: 1px 10px;
    height: 100%;
    vertical-align: top;
}

Upvotes: -1

Related Questions