如何在全屏模式下使垂直div变为水平

Question

I have 2 divs side by side inside a main div. Lets say- left_div & right_div. When browser is in full screen mode- than left_div is 60% and right_div is 40% in width(as, main_div is 100% width).

Now if i restore the browser window and reduce its width- than the divs get underneath each other but still remains the same percentage as 60% & 40% of the screen.

What i want is that if the browser width gets underneath a certain amount than the divs will get underneath each other and also fillup the whole screen width-ie become full browser width.

How can i do it? Do i need to do it with JavaScript or jQuery?

Answer 1

HTML:

<div class="mainDiv">
    <div class="left">
        test
    </div>
    <div class="right">
        test2
    </div>
</div>

CSS:

div.main
{
    width:100%;
}

div.left
{
    width:60%;
    background-color:red;
    float:left;
    height:100px;
}

div.right
{
    width:40%;
    background-color:blue;
    float:left;
    height:100px;
}

@media (max-width: 350px) {
    div.left, div.right
    {
        float:none;
        width:100%;
    } 
}

Answer 2

check this once may be help you here is demo

HTML

<div class="left-div">Left</div>
<div class="right-div">Right</div>

CSS

.left-div{width:60%;height:100px;float:left;background-color:#000;color:#fff} 
.right-div{width:40%;height:100px;float:right;background-color:#333;color:#fff}
@media (max-width: 479px) { 
.left-div, .right-div{float:none;width:100%;} 
}

Answer 3

Your problem has been many people's problem. While you can write your own CSS, but you should consider screens with different DPIs and different devices and different browsers. But Bootstrap allows you to easily manage these situations.

http://getbootstrap.com/

once you include bootstrap in your page, you can have two DIVs like this

http://jsfiddle.net/Gt25L/119/

<div class="col-md-4"></div>
<div class="col-md-8"></div> 

Also look at the tutorials, and they guide you through how to make responsive websites using bootstrap. you will not need any JavaScript. Bootstrap is based on CSS only.

This way you have less CSS to maintain and less chance of wrong behaviour in different browsers & devices over time.