While implementing response sites, its a very common use case where you have a left/right column which is fixed width and the other column need to take rest of the available space. Lets see how to deal with this problem
To understand this further, lets say we have page (2column layout) as shown below
In this the left column will always be fixed at 250px and the right column to take rest of the available space.
Another example would be the design shown below
In this we want the round images to always take a fixed width of 50px and the content to take rest of the available space. To implement this
[js]
/** css classes **/
.left_column{
width: 250px;
position:absolute;
left : 0px;
top: 0px;
}
.right_column {
width : 100%;
}
.parent{
position: relative;
padding-left:250px;
width:100%;
}
[/js]
So basically what we are doing is making the parent take 100% width, but add a padding of fixed pixels. So the actual width becomes 100% – 250px. The left column we make it absolute and give it a fixed width, so that it always stays on the left.
This same trick can be used to have a fixed right column and dynamic left column.