CSS website layout adaptive to content (SOLVED)

I have searched many articles to find this answer but have not been able to find a solution:

I cannot manage to get the wrapper to expand with it's content...

Here is the structure:

 * {
padding: 0;
margin: 0;
}  
body {
background-color: #ccc;
background-repeat:repeat;
font: Tahoma, Geneva, sans-serif;
color: #FFF;
}
.wrapper {
width: 95%;
margin: 0 auto;
}
/* ------------------------ Start Header -----------------*/
.header {
background-color: #333;
}
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Nav Bar -----------------*/
.nav-bar {
background-color: #E8E8E8;
margin: 0px 0px 13px 0px;
min-height: 17px;
padding: 13px;
border: 1px solid #AEAEAE;
}
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li {
list-style: none;
display: inline;
margin-right: 16px;
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif;
}

.nav-links li a:link {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:visited {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:hover {
background-color: #E8E8E8;
color: #999;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
/* ------------------------ End Nav Bar -----------------*/
/* ------------------------ Start outer content -----------------*/
#container {
  overflow: hidden;
  width: 100%;
}

#outercontent {
background-color: #e8e8e8;
width: 97,5%;
padding: 13px;
min-height: 655px;
margin-bottom: 13px;
border: 1px solid #AEAEAE;

  background-color: orange;
  /*padding-bottom: 100em;*/
  /*margin-bottom: -500em;*/
}
* html #outercontent {height: 655px} /* IE Min-Height Hack */ 
/* ------------------------ End outer content -----------------*/
/* ------------------------ Start Columns -----------------*/
#centercolumn { /* Parent Wrapper for inside boxes background-color:    #333333; */ 
background-color: #333333;
margin: 0px 0px 0px 0px;
display: inline; /* IE Hack */
padding: 7px;
width: 80%;
min-height: 630px;
float: left; 

  background-color: red;
 /* padding-bottom: 250em; */
 /* margin-bottom: -250em; */

}

.p {
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif;
}

table.db-table-products { border-right:1px solid #ccc; border-bottom:1px   solid #ccc; background-color:#FFF; overflow:hidden;}
table.db-table-products th  { padding:5px; border-left:1px solid #ccc;   border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma,   Geneva, sans-serif, bold; background-color: #FFF; color: #000;}
table.db-table-products td  { padding:4px; border-left:1px solid #ccc;   font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border-  top:1px solid #ccc; background-color:#999;}

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif;
display: table-caption;

}

table.db-table-products hr { 
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

/* unvisited link */
table.db-table-products a:link {
color: #FFDD38;
}

/* visited link */
table.db-table-products a:visited {
color: #D8C150;
}

/* mouse over link */
table.db-table-products a:hover {
color: #D8B70F;
}

/* selected link */
table.db-table-products a:active {
color: #D8B70F;
}

.rightcolumn {
margin: 0px 0px 13px 13px;
padding: 7px;
display: inline; /* IE Hack */
width: 210px;
min-height: 160px;
float: left;
border: 1px solid #AEAEAE;
background-color: #ccc;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
}
/* ------------------------ End Columns -----------------*/
/* ------------------------ Start Footer -----------------*/
#footer {
border: 1px solid #AEAEAE;
padding: 15px;
margin-bottom: 13px;
background-color: #e8e8e8;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;

   background-color: blue;
 /* padding-bottom: 100em; */
 /* margin-bottom: -200em; */
}
/* ------------------------ End Footer -----------------*/

h1 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
}
.float {
float: left;
padding: 0px 10px 0px 0px;
}
img {
border: none;
}
/* Links */
a:link {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #333333;
background-color: #fff;
text-decoration: none;
}

And here it is HTML code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://ift.tt/kkyg93">
 <html xmlns="http://ift.tt/lH0Osb">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <!-- <link href="table-css/table-db.css" rel="stylesheet" type="text/css"> -->
 <link rel="stylesheet" type="text/css" href="main4.css" />
 <title>Products Market</title>
 </head>
 <body>
 <div id="container">
 <!-- Start Wrapper -->
 <div class="wrapper">
 <!-- Start Header -->
 <div class="header"> <img src="images/logo.jpg" alt="Logo" width="1200" height="150" /> 
 </div>
 <!-- End Header -->
 <!-- Start Navigation Bar -->
 <div class="nav-bar">
 <ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">24h Monetary Market</a></li>
  <li><a href="#">Actual Monetary Market</a></li>
  <li><a href="#">Products Market</a></li>
  <li><a href="#">Jobs Market</a></li>
  <li><a href="#">Contact me</a></li>
 </ul>
 </div>
 <!-- End Navigation Bar -->
 <!-- Start Outer Content -->

 <div id="outercontent">
 <div id="centercolumn">
  <h1><b><u>Welcome</u></b></h1>
  <p>  
 <?php include 'test.php'; ?>
 </p><br />
 </div>  

 <!-- Start Right Content -->
 <div class="rightcolumn">
  <h1><u><b>About Me</b></u></h1>
  TEXT </div>
  <div class="rightcolumn">
  <h1><u><b>Search</b></u></h1> 
    </div>
    <br />
    </div>

  <!-- End Right Content -->
  </div>

  <!-- End Outer Content -->
  <!-- End Outer Content -->
  <!-- Start Footer -->
  <div id="footer"> &copy; Copyright with <a href="http://ift.tt/1diZWpl">Code-Sucks.com</a> 2006-2015 </div>
  <!-- End Footer -->
  </div>
  <!-- End Wrapper -->
  </div>
  </div>

  </body>
  </html>

I would like that outer part of layout reach the same height of content? Could you help me pls?

Thx

Here we go with the solution to the problem. It's a little bit different from the one suggested by petebolduc, but his idea helped me to find a mix solution.

So this is the code:

* {
padding: 0;
margin: 0;
}
body {
background-color: #ccc;
background-repeat:repeat;
font: Tahoma, Geneva, sans-serif;
color: #FFF;
}
/* ------------------------ Start Header -----------------*/
.header {
background-color: #333;
}
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Nav Bar -----------------*/
.nav-bar {
background-color: #E8E8E8;
margin: 0px 0px 13px 0px;
min-height: 17px;
padding: 13px;
border: 1px solid #AEAEAE;
}
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li {
list-style: none;
display: inline;
margin-right: 16px;
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif;
}

.nav-links li a:link {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:visited {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:hover {
background-color: #E8E8E8;
color: #999;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
/* ------------------------ End Nav Bar -----------------*/
/* ------------------------ Start outer content -----------------*/
#container {
  overflow: hidden;
  width: 100%;
}
.wrapper {
vertical-align:top;
width: 95%;
margin: 0 auto;
}

#outercontent {
background-color: #e8e8e8;
width: 97.85%;
padding: 13px;
/* min-height: 655px;*/
margin-bottom: 13px;
border: 1px solid #AEAEAE;
/* height:auto;*/
/* position:relative;*/
/*text-align:left;*/
vertical-align:top;

/*      background-color: orange; */
  /*padding-bottom: 100em;*/
  /*margin-bottom: -500em;*/
}
/** html #outercontent {height: 655px;} */
/* ------------------------ End outer content -----------------*/
/* ------------------------ Start Columns -----------------*/
.lefthalf_col {
width:79.5%;
display:inline-block;
position:relative;
left:0;
top:0;
vertical-align:top;
}

.righthalf_col {
width:19.2%;
display:inline-block;
position:relative;
/*  right:0;*/
left:.9%;
vertical-align:top;
}
#centercolumn { /* Parent Wrapper for inside boxes background-color:  #333333; */ 
background-color: #333333;
/* margin: 0px 0px 0px 0px;*/

padding: 7px;
width:100%;
min-height: 630px;
height:auto;
position:relative;
top:0;

/* width: 75%;*/
/* min-height: 630px;*/
display: inline-block; /* IE Hack */
/* top:0;*/
/* float: left; */

/*      background-color: red; */
 /* padding-bottom: 250em; */
 /* margin-bottom: -250em; */
}
.rightcolumn {
margin: 0px 0px 13px 13px;
padding: 7px;
/* display: inline-block; /* IE Hack */*/
/* width: 210px;*/
width:100%;
min-height: 160px;

position:relative;
top:0;
border: 1px solid #AEAEAE;
background-color: #ccc;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
}

.p {
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif;
}


table.db-table-products { border-right:1px solid #ccc; border- bottom:1px solid #ccc; background-color:#FFF; overflow:hidden;}
table.db-table-products th  { padding:5px; border-left:1px solid #ccc;  border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma,  Geneva, sans-serif, bold; background-color: #FFF; color: #000;}
table.db-table-products td  { padding:4px; border-left:1px solid #ccc;  font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border- top:1px solid #ccc; background-color:#999;}

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif;
display: table-caption;

}

table.db-table-products hr { 
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

/* unvisited link */
table.db-table-products a:link {
color: #FFDD38;
}

/* visited link */
table.db-table-products a:visited {
color: #D8C150;
}

/* mouse over link */
table.db-table-products a:hover {
color: #D8B70F;
}

/* selected link */
table.db-table-products a:active {
color: #D8B70F;
}
/* ------------------------ End Columns -----------------*/
/* ------------------------ Start Footer -----------------*/
#footer {
border: 1px solid #AEAEAE;
padding: 15px;
margin-bottom: 13px;
background-color: #e8e8e8;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;

 /* background-color: blue; */
 /* padding-bottom: 100em; */
 /* margin-bottom: -200em; */
}
/* ------------------------ End Footer -----------------*/

h1 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
}
.float {
float: left;
padding: 0px 10px 0px 0px;
}
img {
border: none;
}
/* Links */
a:link {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #333333;
background-color: #fff;
text-decoration: none;
}

And here is the html code:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
   <html xmlns="http://ift.tt/lH0Osb">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <link rel="stylesheet" type="text/css" href="main7.css" />
   <title>Products Market</title>
   </head>
   <body>
   <div id="container">
   <!-- Start Wrapper -->
   <div class="wrapper">
   <!-- Start Header -->
   <div class="header"> <img src="images/logo.jpg" alt="Logo" width="100%" height="150" /> 
   </div>
   <!-- End Header -->
   <!-- Start Navigation Bar -->
   <div class="nav-bar">
   <ul class="nav-links">
   <li><a href="#">Home</a></li>
   <li><a href="#">24h Monetary Market</a></li>
   <li><a href="#">Actual Monetary Market</a></li>
   <li><a href="#">Products Market</a></li>
   <li><a href="#">Jobs Market</a></li>
   <li><a href="#">Contact me</a></li>
   </ul>
   </div>
   <!-- End Navigation Bar -->
   <!-- Start Outer Content --> 
   <!--  <div class="tablegraph">
   <div class="row"> -->
   <div id="outercontent">
   <div class="lefthalf_col">
   <div id="centercolumn">
   <h1><b><u>Welcome</u></b></h1>
   <p>  
   <?php // include 'query.php';
   include 'query2.php'; ?>  ‫
   </p><br />
   </div>
   </div>
   <!-- Start Right Content -->
   <div class="righthalf_col">
   <div class="rightcolumn">
   <h1><u><b>About Me</b></u></h1>
   TEST
   </div>
   <div class="rightcolumn">
   <h1><u><b>Search</b></u></h1>
   <br />
   TEST
   </div> 
   </div> <!-- half_col -->


   <!-- End Right Content -->
   </div>
   <!-- End Outer Content -->
   </div>

   <!-- Start Footer -->
   <div id="footer"><p> &copy; Copyright with <a href="http://ift.tt/1diZWpl" target="_blank">Code-Sucks.com</a> 2006-2015 </p>
   <p>Thanks to <a href="http://ift.tt/fyw30c" target="_blank">Stackoverflow.com</a> guys! </p>

   </div>
   <!-- End Footer -->

   </div>
   <!-- End Outer Content -->
   </div>
   <!-- End Wrapper -->
   <!--</div>
   </div>-->

   </body>
   </html>

In the end problem seemed to be with "float" attribute. Changing that and positioning the DIVs I needed for content into wrapper DIV part and into outer content DIV part, the problem was resolved.

Thx for the help.