How do I auto adjust divs that are pre-installed?
I would like to ask a question that I have wanted to know for some time.
I would like to create a site that auto-configures the divbox when the windows are configured ... and therefore will be smaller if the other div next to it is inline.
I gave an example of the second question which I will explain.
This snapshot is how I want the website to look on the first page, so that I can have the content on the left in a larger div and then the control bar on the right at that size.
http://i.imgur.com/35ljicH.png
And I want to make it so that when I remove the sidebar from the actual html, for another page; the content will automatically resize to the full length of the container, i.e.
http://i.imgur.com/fzfZ9Oa.png
Please help me if you can! Thank!
source to share
Most modern browsers support a queer environment @media
that fires automatically when certain conditions are met. Here's an example that automatically configures a div.
To better understand this,
Write the following CSS,
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only 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 gives 12 different sizes for the div. Now, as you mentioned in your question, you want the content on the left to be larger compared to the control bar on the right, you can specify the left content with class="col-9"
and the right control bar withclass="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 shrunk, the div will automatically adjust itself.
You can do this through a 3rd party framework used for agile projects. I would recommend Bootstrap for this. But if you want to do it in a complex way, i.e. on your own, you can use the above css.
source to share
You can do this "disapear" with 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 AN EXAMPLE
source to share