CSS Align Boxes - css

Question

I have a footer that has 3 columns of content. Currently the css is using float:left. I have tried the following but I just cant get it to align vertical and horizontal.
display block
display block-inline
margin: 0 auto
HTML:
<div id="footer">
<div class="column">
<h3>Information</h3>
<ul>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
CSS:
#footer .column {
float:left;
width: 25%;
min-height: 100px;
}

Answer 1

You should use container div with position absolute and #footer should have position relative.
Here is the solution code
http://jsfiddle.net/7Pcag/1/
or more simpler solution http://jsfiddle.net/7Pcag/5/

Answer 2

.column ul li{
float:left;
width: 25%;
min-height: 100px;
}
the above will align then horizontally if that's what your question is asking
edit
<div class="footer" id="footer">
<div class="column">
<h3>Information</h3>
<ul>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
.footer.column{
float:left;
width: 25%;
min-height: 100px;
}

Answer 3

<div class="footer">
<div class="columns">
<div class="column">
Information
<ul>
<li>One</li>
<li>One</li>
<li>One</li>
</ul>
</div>
<div class="column">
Information
<ul>
<li>Two</li>
<li>Two</li>
<li>Two</li>
</ul>
</div>
<div class="column">
Information
<ul>
<li>Three</li>
<li>Three</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
<style>
.footer
{
width:100%;
background-color:Yellow;
}
.footer .columns
{
text-align:center;
}
.column
{
text-align:center;
display:inline;
width: 150px;
}
</style>

Answer 4

I believe you already have the correct solution, so you might be doing something else wrong. I adjusted your min-height to 150px and things work fine here: http://jsfiddle.net/xkdk9/1/