Add to your .footer1
CSS class:
text-align: center;
And replace in your .col
CSS class
float:left;
With
display:inline-block;
Question
Im trying to do a footer with 4 columns, and I want that 2 columns stay above and the others below theese columns.
And I already have sucess doing this, but now Im having some difficulties alignin my 4 columns at center of my div #footer1.
Im tryng this: http://jsfiddle.net/GM23h/2/ (using margin:0 auto)
My html:
<footer class="footer-container">
<section class="footer1">
<div class="col">
<h1>Contacts</h1>
<ul>
<li><a href="#"> 0000 0000 0000</a></li>
<li ><a href="#"> 0000 0000 0000</a></li>
</ul>
</div>
<div class="col">
<h1>Contacts</h1>
<ul>
<li><a href="#"> 0000 0000 0000</a></li>
<li ><a href="#"> 0000 0000 0000</a></li>
</ul>
</div>
<div class="col">
<h1>Contacts</h1>
<ul>
<li><a href="#"> 0000 0000 0000</a></li>
<li ><a href="#"> 0000 0000 0000</a></li>
</ul>
</div>
<div class="col">
<h1>Contacts</h1>
<ul>
<li><a href="#"> 0000 0000 0000</a></li>
<li ><a href="#"> 0000 0000 0000</a></li>
</ul>
</div>
</section>
</footer>
My css:
.footer-container
{
width:100%;
height:auto;
float:left;
}
.footer1
{
width:600px;
margin:10px auto 10px auto;
background:gray;
overflow:hidden;
}
.footer1 ul
{
list-style:none;
}
.footer1 ul li
{
margin:0 0 7px 0;
}
.footer1 ul li a
{
text-decoration:none;
}
.col
{
float:left;
margin:10px 10px 10px 10px;
width:270px;
height:155px;
background:yellow;
}
.col h1
{
border-bottom:1px dashed #ccc;
color:#fff;
font-size:14px;
margin-bottom:10px;
width:160px;
}
La solution
Add to your .footer1
CSS class:
text-align: center;
And replace in your .col
CSS class
float:left;
With
display:inline-block;