Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Responsive design for 3divs, 2 div's width in px and other in "%"

Responsive design for 3divs, 2 div's width in px and other in "%"

Problem

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.......

Problem courtesy of: rubin

Solution

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/

Solution courtesy of: sandeep

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Responsive design for 3divs, 2 div's width in px and other in "%"

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×