How To Make Auto Adjusting Divs That Are Pre-set?

I would like to ask a question that I wanted to know for some time now.. I'd like to make a website where the divbox's auto adjust when you rezise the windows.. and so they be size

Solution 1:

Most modern browsers supports media query @media which fires automatically when some conditions are true. Here is an example in which the div auto adjusts themselves.

To better understand it,

Write following CSS,

/* For mobile phones: */[class*="col-"] {
    width: 100%;
}
@mediaonly screen and (min-width: 768px) {
    /* For desktop: */.col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/*To specify extra padding*/[class*="col-"] {
    float: left;
    padding: 15px;
}

/*Just to add visual effect*/.left-content{
    background-color: red;
    height: 100px;
}

.right-content{
    background-color: blue;
    height: 100px;
}

What the above CSS does is that it specifies 12 different sizes for a div. Now as you mentioned in your question you want the content on the left bigger compared to the control panel on the right you can specify the left content with class="col-9" and the right control panel with class="col-3"

<div class="col-9 left-content">
   Content on left
</div> 

<div class="col-3 right-content">
   Content on right
</div>


    

Now when the browser is resized and made small the div will automatically adjust themselves.

You can do this via some 3rd party framework used for responsive designs. I would recommend Bootstrap for it. But if you want to do it the hard way i.e. on your own then you can use the above css.

Solution 2:

You can make it 'disapear' by using jQuery, something like this:

`$(document).ready(function() {

$('.triger').click(function(){

    $('.container .b').toggle();

    if ($('.b').is(':visible')){
        $('.a').css('width','70%');
    } else { 
        $('.a').css('width','100%');
    }

});

});`

It should be something like this: HERE IS A EXAMPLE