CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kris Schatten
Kris Schatten

Reputation: 11

How to dynamically resize 3 divs on window.resize?

I have the following HTML:

<div style="min-width:1024px;max-width:82%;margin:0 auto;overflow:auto">
    <div style="height:344px;width:100%;float:left;margin-top:72px"></div>
    <div style="width:100%;float:left;">
        <div id="left" class="radius" style="height:700px;width:220px;background:#fff;float:left"></div>
        <div id="middle" class="radius" style="width:760px;background:#fff;float:left;margin:0px 18px;">
            <div style="height:700px;width:100%;float:left"></div>
        </div>
        <div id="right" class="radius" style="height:700px;width:280px;background:#fff;float:left"></div>
    </div>
</div>

and script:

function scalling() {
    var a = $(window).width();
    if (a < '1300') {
        var def = a * 82 / 100,
            l = 22000 * def / 10,
            m = 76000 * def / 10,
            p = 28000 * def / 10;
        $('#left').css('width', l);
        $('#middle').css('width', m);
        $('#right').css('width', p);
    } else {
        $('#left').css('width', '220px');
        $('#middle').css('width', '760px');
        $('#right').css('width', '280px');
    }
}

scalling();
$(window).resize(function () {
    scalling();
});

It works but add size to divs in oder way when window is scaling to be biger divs are smaler and when window is smaller the divs are bigger

Sorry for my bad anglish

Upvotes: 1

Views: 109

Answers (1)

Enethion
Enethion

Reputation: 1257

You could simply use this CSS statement:

@media ( min-width :1300px){
    selector{
        width: constant-value;
    }
}

@media ( max-width :1300px){
    selector{
        width: percent-value;
    }
}

Upvotes: 1

Related Questions