Let’s say I have a wrap with a max-width of 900px.
Then I have this.
The CSS looks as follows.
#wrap {
max-width: 900px;
}
/*both columns are fluid*/
.left {
width: 33.3333333333%; /* 300/900x100 */
background: blue;
}
.right {
width: 66.6666666667%; /* .. */
background: green;
}
/*one column is fixed, the other fluid*/
.fixed {
float: left;
width: 300px;
background: lightblue;
}
.fluid {
float: right;
width: 66.6666666667%; /* .. */
background: lightgreen;
}
I’m sure you can picture what that looks like. When you resize the browser .left and .right scales just fine. But obviously, when .fixed doesn’t have a fluid width, as soon as you start scaling, .fluid will drop a line because there’s not enough space for it to stay to the right of .fixed. If anyone can bring me up to speed on how I can deal with this, I’d appreciate it big time. What’s the technique I’m not seeing?
