CSS Align Boxes

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><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;
}

@Sheen I am wanting the boxes in the footer to be aligned not the content — Jess McKenzie
– Jess McKenzie, Commented Aug 30, 2011 at 4:48

Artur Keyan · Accepted Answer · 2011-08-30 05:26:00Z

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/

edited Aug 30, 2011 at 5:26

answered Aug 30, 2011 at 5:19

Artur Keyan

7,69312 gold badges54 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikola K. · Accepted Answer · 2012-07-22 09:13:57Z

1

.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;
}

edited Jul 22, 2012 at 9:13

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Aug 30, 2011 at 4:40

griegs

22.8k33 gold badges132 silver badges208 bronze badges

2 Comments

Jess McKenzie Over a year ago

I am wanting the boxes in the footer to be aligned not the content

Jess McKenzie Over a year ago

I want to align cl.ly/3f1H1q3k0P370s1V0w3n in the middle of the footer box

griegs · Accepted Answer · 2011-08-30 05:43:09Z

<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>

Ray Toal · Accepted Answer · 2011-08-30 04:59:25Z

0

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/

answered Aug 30, 2011 at 4:59

Ray Toal

88.7k20 gold badges186 silver badges245 bronze badges

Collectives™ on Stack Overflow

CSS Align Boxes

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related