fluid sides and fixed main-centered layout

fluid sides and fixed main-centered layout

I having a hard time trying to find any examples, but what i want to accomplish is have a three column layout. The center column be centered and fixed width while the left and right columns are liquid and takes up the rest of the browser space that is not taken up by the center column.

I have only seen the other way around where the left/right columns are fixed width and the center is fluid. or some form of this
So i have tried this with just HTML and its not going to happen(well not easily), but I realized I have jQuery, so i am just wondering now is there a way expand divs on the left and the right of a fixed width centered div to take up the rest of the browser space?


Here is what i have tried, but remember it is not working correctly... And i dont know how to implement it in jQuery so this is my attempt at HTML only.
HTML:::
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head profile="http://gmpg.org/xfn/11">
       <title>BASIC</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <meta name="robots" content="noindex, nofollow" /> 
       
       <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
       <script type="text/javascript" src="js/script.js"></script>
    </head>

    <body>
       <div id="page-wrap">
          <div id="leftCol" class="clear"></div>
             
          <div id="centerCol" class="clear"></div> 
             
          <div id="rightCol" class="clear"></div>
             
       </div>
    </body>


    </html>
























  2. *               { margin: 0; padding: 0; }
    html, body         { height: 100%; color: white; font: 14px Georgia; background-color: #0b0b0b;}
    a               { text-decoration:none; color:white;}
    a img            { border: 0; }

    #page-wrap         { }
    .clear            { clear:both;}

    #leftCol         { width: 100%; background:blue; height:100px; float:left;}
    #centerCol         { margin:0 auto; width:400px; background:green; height: 200px; float:left;}
    #rightCol         { width: 100%; background:blue; height:100px; float:left;}