Having 3 divs in a single row can be quite challenging.
<div id="left"></div><div id="middle"></div><div id="right"></div>This layout requires the middle div to have a fixed width, while the left and right divs adjust as the screen size changes.
If you're wondering how to write the CSS for this scenario, here's what I've got so far:
The three divs are wrapped in another div with the ID #mid
#mid {
max-width: 100%;
min-height: 395px;
max-height: 395px;
position: relative;
background-color: #F00;
display: block;
}#left {
min-width:35%;
min-height: 395px;
max-height: 395px;
background-color: #00F;
position:relative;
float: left;
}#middle {
min-width:30%;
min-height: 395px;
max-height: 395px;
background-color: #3F0;
position:relative;
float: left;
}#right {
min-width:35%;
min-height: 395px;
max-height: 395px;
margin:0;
padding:0;
background-color: #0FF;
position:relative;
float: left;
}