开发者

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 &amp; 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 &amp; 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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜