3

I have a view with 4 articles within a colored box. When the screen is wide enough they need to be displayed side by side and have the same height like this:

Article 1       Article 2
Article 3       Article 4

I have tried adding the style so the container - row and columns have following style, but to no result either:

.container-height{
display:table;
}

.row-height{
display:table-row;
}

.col-height{
display:table-cell;
float:none;
}

https://plnkr.co/edit/vrlHw8tepKZ5nj4SW8EB?p=preview

ketan
  • 19,129
  • 42
  • 60
  • 98
JMan
  • 2,611
  • 3
  • 30
  • 51

3 Answers3

1

Well, if you are ok with jquery solution then please have a look at this code.

Check fiddle

$(document).ready(function(e) {
    var heightNew = 0;
    $('.col-md-6 article').each(function(index, element) {
        if($(this).height() > heightNew){
            heightNew = $(this).height();
        }
        $(this).css('height', heightNew+'px');
    });
});

so just add this in tag and use this css.

article{
    text-align:center;
    background-color:lightgray;
    margin:0 25px 50px 25px;
}
h1, p{
    padding:10px;
}

What i did is, i took max-height of article and give that height to other so who ever is the biggest article, all article will be the same height. Hope you will like my idea. Thank you

Leo the lion
  • 3,164
  • 2
  • 22
  • 40
0

getting them along side each other can be achieved by using the bootstrap class col-lg-6 in the case of 2 cols this adds up to 12 and only be active on a large screen (from 1200px and up)

the quickest way to get the equal height for all of the columns (in case of fixed content) is by setting the height, making use of a media query

@media(min-width: 1200){ height: xx; }

Vincent T
  • 3,044
  • 2
  • 9
  • 18
  • Could be a possibility, but then whenever the contents change a recalculation is required for the good height – JMan May 05 '16 at 08:25
0

If you using Bootstrap. This code very helpfull for you

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="container">
            <div class="row  row-eq-height">
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec.. Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sit fdfdfamet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sidfdft amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sit afgfmet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
            </div>
        </div>
    </body>

</html>

<!-- begin snippet: js hide: false -->
Mamun
  • 145
  • 11
  • wish that could be that simple, but have you see his demo? he want that way - two row, with two col inside each – Eezo May 05 '16 at 07:50
  • But it is possible to put the `equal height` class on the cols, see bootstrap docs [docs](http://getbootstrap.com.vn/examples/equal-height-columns/) – Vincent T Mar 06 '17 at 12:32