We can extend the concept of floating divs to give the 3 column layout often seen on websites.
The idea of fixing the width of the outer columns allows the center
column to adjust according to the screen width.
This is an example of 'Liquid Layout'.
Designing for Liquid Layouts accomodate varying screen sizes and resolutions.
We 'float' Div tags for Column 1 left and Column 3 right.
Column 1 is floated left , Column3 is floated right.
The only complication is both the floats are entered onto the web page before we place the middle column, Column2.
So the webpage is coded Column 1, Column3 and then the central column Column2.
Here is the CSS for the 3 Divs.
.col1 {float:left;width:150px;font-size:8pt;
background-color:#222222;height:100%;border:solid black
1px;}
.col2 {margin-left:150px;margin-right:150px;
background-color:#444444;height:100%;border:solid black
1px;}
.col3 {float:right;width:150px;font-size:8pt;
background-color:#333333;height:100%;border:solid black
1px;}
We set the left hand Div to have a width and float:left.
On the right hand div we set margin-left equal to the width of the left
div.
In this way the text in the right hand div is displayed once the left hand div is finished.
Finally I have put all three Divs into another containing div tag whose height I set to 150px.