CODEWITHSUNDEEP
htmlcssimagefooter
user3047736
user3047736

Reputation:

Build a centered column footer

I'm developing a columned footer that displays four columns. One of the columns, being just an image. The rest being useful hyperlinks.

Design of the footer I'm shooting for.

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?

Upvotes: 0

Views: 470

Answers (4)

EternalHour
EternalHour

Reputation: 8621

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.

Upvotes: 0

Pavi
Pavi

Reputation: 1739

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

Upvotes: 0

user1793182
user1793182

Reputation:

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.

Upvotes: 0

Jmh2013
Jmh2013

Reputation: 2777

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

Upvotes: 1

Related Questions