Build a centered column footer - html

Question

I'm developing a columned footer that displays four columns. One of the columns, being just an image. The rest being useful hyperlinks.
Here's what I have working right now http://jsfiddle.net/Lqh5a/
HTML
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li></div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
<li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li></div>
</div>
</div>
CSS
#footer {
width: 100%;
margin: auto;
padding-bottom:200px;
}
.footerFloat {
width: 100%;
}
#media all and (min-width: 950px) {
#footer {
width: 980px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
}
}
#wrapper {
background-color: blue;
width: 100%;
overflow:hidden;
}
Never done this before, so I'm not sure if I'm doing this correctly. How can i get this footer to look correct?

Answer 1

Its not perfect but it will get you in the direction you want to go. I just added some css to your fiddle.
.footerFloat {
width: 25%;
float: left;
}
.footerFloat ul{
list-style: none;
padding: 0;
margin: 0;
}
FIDDLE

Answer 2

You were missing some ul tags. But this should get you close to what you want.
JSFiddle
HTML:
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>COMPANY</h4>
<ul>
<li>CONTACT</li>
<li>CUSTOMER CARE</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="footerFloat">
<h4>ORDERING</h4>
<ul>
<li>SHIPPING</li>
<li>RETURNS</li>
<li>SIZE CHART</li>
</ul>
</div>
<div class="footerFloat logo">
<img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101">
</div>
<div class="footerFloat">
<h4>STORE</h4>
<ul>
<li>SHOP</li>
<li>RETAILERS</li>
<li>GIFT CARDS</li>
</ul>
</div>
<div class="footerFloat">
<h4>SOCIAL</h4>
<ul>
<li>BLOG</li>
<li>INSTAGRAM</li>
<li>PINTEREST</li>
</ul>
</div>
</div>
</div>
CSS:
ul {
list-style: none;
list-style-position: inside;
padding: 0;
}
ul li {
text-align: center;
}
#footer {
width: 100%;
margin: auto;
padding-bottom:200px;
}
.footerFloat {
width: 19%;
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 0.750em;
}
#media all and (min-width: 950px) {
#footer {
width: 980px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
}
}
.logo {
padding-top: 4em;
}
#wrapper {
background-color: #fff;
width: 100%;
overflow:hidden;
}
EDIT: Fiddle wasn't working.

Answer 3

If you have any problems with the floating divs you could take a different route.
add pos:absolute; bottom:0px to the container div then add pos:relative; top:0 left 0
If you've floated everything above the footer that could be an issue though.

Answer 4

Here try these. This should work it out...
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
<li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
</div>
</div>
Couple it with the css:
#footer {
width: 100%;
margin: auto;
padding-bottom:200px;
}
ul{
list-style: none;
display: inline-block;
padding: 0;
}
#media all and (min-width: 950px) {
#footer {
width: 950px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
text-align: center;
}
}
#wrapper {
background-color: blue;
width: 100%;
overflow:hidden;
}