CSS Align Boxes
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><a href="">Delivery Information</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms & Conditions</a></li>
</ul>
</div>
</div>
CSS:
#footer .column {
float:left;
width: 25%;
min-height: 100px;
}
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/
.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><a href="">Delivery Information</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms & Conditions</a></li>
</ul>
</div>
</div>
.footer.column{
float:left;
width: 25%;
min-height: 100px;
}
<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>
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/
精彩评论