CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
Gabi Gatzki
Gabi Gatzki

Reputation: 83

boostrap and wordpress - 3 columns same height

Im using bootstrap to style my wordpress site a bit. I have a code that contains a container div, a row, and inside 3 columns, when each column gets it data from wordpress (or a db for that matter), and the height of each column is the height of its content.

What i want is the 3 column to be of the same height, based on the highest column. I tried adding display: table; to the container, display:table-row; to the row, and display:table-cell; to each column, but it still wont work.

My code:

<div class="container-fluid" id="page-body">
    <div class="row pull-right">
        <div class="col-sm-7 pull-right page-content-wrapper">
            <div class="page-content">
                <?php echo the_content(); ?>
             </div>
        </div>
        <div class="col-sm-3 pull-right page-products-wrapper">
            <div class="">
                test
            </div>
        </div>  
        <div class="col-sm-2 pull-right side-menu-wrapper">
            test 2
        </div>      
    </div>
</div>

and the css I have is:

#page-body{
    display: table;
    width: 100%;
    margin-top: 40px;
    direction: rtl;
    padding-right: 9.5%;
    padding-left: 9.5%;
}

#page-body .row{
    width:100%;
    display: table-row;
}

.page-content-wrapper, .page-products-wrapper, .side-menu-wrapper{
    display: table-cell;
}

.page-content-wrapper{
    border-right: 1px solid #BE1621;
    border-left: 1px solid #BE1621;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.page-content{
    background: #dadada; /* Old browsers */
    background: -moz-linear-gradient(left,  #dadada 0%, #ffffff 50%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #dadada 0%,#ffffff 50%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #dadada 0%,#ffffff 50%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadada', endColorstr='#dadada',GradientType=1 ); /* IE6-9 */
    padding: 25px 10px 25px 10px;
    font-size: 22px;
}

.page-products-wrapper{
    border-left: 1px solid #BE1621;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

I see nothing here that should make it not work, but for some reason it wont... Any help would be appreciated.

Thanks in advance, Gabi.

Upvotes: 0

Views: 336

Answers (2)

Karl Dawson
Karl Dawson

Reputation: 977

Modifying Bootstrap using the valid techniques so far provided is a risky business unless you're confident with media queries to apply these styles only at the intended screen sizes. In this case I would use JavaScript to apply an inline height equal to the tallest column - apply a class of jsEqualHeight to each col- with the following JS: (Note the media query)

if (jQuery) {
    (function ($) {
        "use strict";
        $(document).ready(function () {

            $(window).on('resize', function () {
                equalHeights();
            });

            equalHeights();

            function equalHeights() {
                if (window.matchMedia("(min-width: 992px)").matches) {

                    var elementHeights = $('.jsEqualHeight').map(function () {
                        return $(this).height();
                    }).get();

                    // Math.max takes a variable number of arguments
                    // 'apply' is equivalent to passing each height as an argument
                    var maxHeight = Math.max.apply(null, elementHeights);

                    // Set each height to the max height
                    $('.jsEqualHeight').height(maxHeight);
                } else {
                    $('.jsEqualHeight').css({ "height": "auto" });
                }
            }
        });
    }(jQuery));
}

Upvotes: 0

Alexander Erlandsson
Alexander Erlandsson

Reputation: 36

This could be achieved by using flexbox. First, remove the table properties you've added, and then just add this line to the row class:

.row {
   display: flex;
}

If you want to go with tables instead, add this:

.row {
   display: table;
}
[class~="col-"] {
   display: table-cell;
}

I highly suggest you to use flexbox, but it depends on which browser support you are looking for.

Upvotes: 0

Related Questions