CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alex-greaves
alex-greaves

Reputation: 189

(Fixed by design change) Calculating heights to keep two columns equal height with jQuery on a responsive design site

This is no longer an issue as the design has been changed, but I'll leave the question up so that if other people have a similar issue they can discuss it.

I am working on a site where there is a section containing 4 elements all 50% width, 3 of these elements are images of different sizes and 1 text section (this section of text has 3 sets of content which can be changed through a set of navigation buttons at the top. The elements within the section have to be divided into 2 columns placed next to eachother and they have to remain the same height no matter how the user re-sizes the window.

http://jsfiddle.net/jbaLr019/1/

$(window).load(function() {  

$promotionTopLeft = $('.promotion-top-left');
$promotionTopRight = $('.promotion-top-right');
$promotionCenterLeft = $('.promotion-center-left');
$promotionCenterRight = $('.promotion-center-right');
$promotionLeftColumn = $('.left-column.grid-column');
$promotionRightColumn = $('.right-column.grid-column');

var leftColumnHeight = $promotionLeftColumn.innerHeight();
var rightColumnHeight = $promotionRightColumn.innerHeight();
var columnHeightDifference = rightColumnHeight - leftColumnHeight;

if (leftColumnHeight < rightColumnHeight) {
    if (leftColumnHeight != rightColumnHeight) {
        // console.log(columnHeightDifference);
        $promotionTopLeft.css('margin-bottom', columnHeightDifference); 
    }

    $(window).resize(function(){
        var leftColumnHeight = $promotionLeftColumn.innerHeight();
        var rightColumnHeight = $promotionRightColumn.innerHeight();
        var columnHeightDifference = rightColumnHeight - leftColumnHeight;

        if (leftColumnHeight != rightColumnHeight) {
            // console.log(columnHeightDifference);
            $promotionTopLeft.css('margin-bottom', columnHeightDifference); 
        }
    });
}
});

Above is a JS fiddle I've made as similar to the relevant section of the actual site as possible, there are a couple differences though. The jQuery calculates the height of the 2 columns then finds the difference and adds it as margin to the bottom of the top-left (text) block.

I've also tried putting them as row items instead of columns so that they would fit under eachother as the page gets re-sized. Because of the text section's growth it pushes the other elements onto the right side of the screen rather than falling below eachother.

Also to note this is a full-width site.

Upvotes: 3

Views: 74

Answers (2)

Per Eriksson
Per Eriksson

Reputation: 534

"The elements within the section have to be divided into 2 columns placed next to eachother and they have to remain the same height no matter how the user re-sizes the window."

You will get that behavior using a <table>. Just a suggestion, don't kill the messenger...

Upvotes: 0

Alex
Alex

Reputation: 829

Maybe you wana do something like this

EDIT:

Okay, i missunderstood you, here's an updated, resonsive variant.

* {
    margin:0;
    padding:0;
}

.container {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
    
    border:solid 1px black;
    box-sizing:border-box;
}
.container-ele {
    display:block;
    padding:10px;
    box-sizing: brder-box;
    vertical-align:top;
}
.content {
    background:#eee;
}

img {
    display:block;
    float:left;
    width:100%;
    background:red;
    margin:1% 0;
}

@media(min-width: 320px) {
    .container-ele {
        display: table-cell;
    }
}
<div class="container">
    <div class="container-ele">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
    </div>
    <div class="container-ele">
        <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
        <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
    </div>
</div>

Upvotes: 1

Related Questions