Base Structural CSS

To simplify markup, I'm using the border-box box model. Column widths are in percent.

#wrapper {
width: 98%;
margin: 0px auto;
min-width: 480px;
overflow: hidden;
}
.column {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #BBB;
border-radius: 5px;
float: left;
padding: 28px;
}
#column-1 {
width: 40%;
margin-right: 2%;
font-size: 14px;
}
#column-2 {
width: 30%;
margin-right: 2%;
font-size: 14px;
}
#column-3 {
width: 26%;
font-size: 14px;
}

Media Queries

Media queries are used to reflow the layout depending on browser width. Here is one of the queries (for the rest, please view source code):

@media only screen and (min-width: 640px) and (max-width: 760px) {
#column-1 {
width: 48%;
margin-right: 2%;
}
#column-2 {
width: 50%;
margin-right: 0%;
}
#column-3 {
margin-top: 12px;
width: 48%;
height: auto !important;
clear: both;
}

Device and Browser Support

The structural reflow works in all modern browsers and also in IE8. For expediancy, IE7 and under are completely linearized in a conditional comment, which can be customized if desired.

Notes

The columns are equal height via the PVII Equal Heights Column script.

This is one of many possible solutions that can be used to achieve an adaptive layout. To find additional solutions, use Google to search for adaptive CSS or responsive CSS.

This image is actually 1024 pixels wide, but is set to adapt to the width of its container.