CODEWITHSUNDEEP
css
Toniq
Toniq

Reputation: 4996

Css div responsive design

I have 2 divs inside one container div:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

This is how it should work:

Left one if fixed size, right one should be responsive and should have minimum and maximum width, which means if you shrink window width, right div should just shrink its width! (in between its min and max width) and stay on the right of the left div!, until width of the container div becomes smaller than left div width + right div min width, then right div should fall below left div!

http://jsfiddle.net/5m8Lj/6/

Width current css, green div should shrink its width with between 200 and 500px, while staying on the right of left div, only if container div becomes smaller than 400 (width of both divs) then green div should fall below blue div.

Thank you!

Upvotes: 1

Views: 24061

Answers (1)

brouxhaha
brouxhaha

Reputation: 4093

min-width and max-width don't work like that: http://css-tricks.com/almanac/properties/m/max-width/

If you can use calc, this is one way to do it: DEMO

.right {
    width: calc(100% - 200px);
}

If not, you can do the following: DEMO

This assumes that the height and width of .left are set numbers.

.left {
    position:fixed;
    left: 0;
    top: 0;
}

.right {
    margin-left: 200px;
    min-width:200px;
    width: auto;
}

@media screen and (max-width: 400px){
    .right {
        width: 100%;
        clear: both;
        margin-left: 0;
        margin-top: 200px;
    }
}

Upvotes: 4

Related Questions