Question

I have 3divs left, center, right
The problem is that left need to be 320px, right 150px and center will take the rest of the space.
How can i do this? It need to be 100% response. I dont know how big the screen is, it can vary from 1920 to 1600screen resolution, but left and right need to be fixed.

The examples that has been posted in the comments works, but if you want to make 2 column if the width is max 768 and hide the 3d div with display: none; it will not work with the table example. And the other one with css3 box doesnt either work because it doesnt work in Explorer, there is no pollyfill.

So is there any fix for this or do i need to do it the classic way and compensate with margins and padding etc…….

Answer 1

You can display:table property for this. write like this.

.parent{
    display:table;
    width:100%;
}
.parent > div{
    display:table-cell;
    min-height:200px;
}
.left{
    width:320px;
    background:green;
}
.center{
    background:red;
}
.right{
    width:150px;
    background:yellow;
}

Check this http://jsfiddle.net/BNQfC/1/

OR

You can use CSS3 flex-box property.

Check this http://jsfiddle.net/sjYNy/1/