Two columns DIV max size for the second

Here I am writing a solution for a css problem in which we have fixed width for the first left div and viariable with [max] for the second right div. The right div width should be according to the width of the container i.e

width of Right Div = Width of container - width of left div - margin

it may be when you would like to give navigation bar on left and some other content on right or view versa. it can be useful anywhere. Here we got:

1.) main container with clearfix class to fix the afterwards clear.

2.) main container has 2 div , left one with fixed width and right one with variable width.

3.) Left one uses float left to hang over on the left side where as right one uses margin to fix its width over the container.

so here is the code:


<style>
#LeftDiv{
float: left;
width: 150px;
background-color:red;
height: 150px;
}
#RightDiv{
background-color:fuchsia;
margin-left:160px;
height: 50px;
}
</style>
<div id="containerDiv" style="background-color:Lime; width: 1000px; margin: 0 auto;" class="clearfix">
<div ID="LeftDiv">
AAAA
</div>
<div ID="RightDiv">

BBBB
</div>
</div>
<div>
Here goes the footer
</div>

Enjoy...

A sample test can be done here:

http://sachicomputer.com/kabin/samples/csstest.htm