Q:

CSS formatting gone wrong

I want the list to float in the center of the menucontainer.  Also the text in the boxes below the house (it's just a random image I took for demonstration) to float in the center of the box. 
And then I want the content container to fill up all the space left in the bigcontainer below the menucontainer. 
This is what i wanted to get:

And this is what i wound up with:

Obviously I have no idea what I'm doing. 
This is the code: http://jsfiddle.net/krhzM/
<! DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
 list-style:none;
 position:relative;
}
li {
 border: 1px solid #CCC;
 margin:5px;
 float:left;
}
#menucontainer {
 border: 1px solid #111;
 width: 400px;
 margin-left: auto;
 margin-right: auto;
}
#contentcontainer {
 width:100px;
 border: 1px solid #fac;
}
#bigcontainer {
 border: 2px solid #cfa;
 width: 700px;
 margin-left: auto;
 margin-right:auto;
}
</style>
</head>
<body>
<div id="bigcontainer">
<div id="menucontainer">
 <ul>
  <li>
   <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/>
   <br/>
   <a href="#">Coffee</a>
  </li>
  <li>
   <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/>
   <br/>
   <a href="#">Tea</a>
  </li>
  <li>
   <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/>
   <br/>
   <a href="#">Coca Cola</a>
  </li>
 </ul>
</div>
<div id="contentcontainer">
 <h1>this is my content</h1>
</div>
</div>
</body>
</html>

A:

A floated element's height does not push/expand or affect the parent element's height, unless the parent element contains a clear at the end. 
You need to use some clearfix methods on the parent containers when using floats. 
http://css-tricks.com/snippets/css/clear-fix/
Add the following to your CSS: 
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

For all parent containers containing floated child elements, add the class .clearfix, like this:
<div class="clearfix">
  <div class="float-left">This is floated left.</div>
  <div class="float-right">This is floated right.</div>
</div>

In your case, you will want to add the .clearfix class to your <ul> contained in your #menucontainer div, since you are floating the <li> tags. 
If you're still confused, check out this demo of the different scenarios involving floats and clears to get a better understanding of how it works: http://themergency.com/clearfix/clearfix_demo_4_micro_clearfix.htm

