CODEWITHSUNDEEP
htmlcssfooter
Nohman
Nohman

Reputation: 121

Aligning text links underneath each other

I'm trying to align text links underneath each other but for some reason some of the links doesn't go underneath each other.

This is how it looks like: https://i.sstatic.net/1gonA.jpg.

This is what I want to achieve: https://i.sstatic.net/oH0Ap.jpg

Here is the code so far:

HTML:

    <footer class="footer">
      <div class="bottom-column">
        <div class="bottom-header">STREETZ</div>
        <a class"bottom-link" href="#Home">Home</a>
        <a class"bottom-link" href="#About">About us</a>
        <a class"bottom-link" href="#Sitemap">Sitemap</a>
        <a class"bottom-link" href="#Blog">Blog</a>
        <a class"bottom-link" href="#Blog">Privacy Policy</a>
        <a class"bottom-link" href="#Blog">Terms of Service</a>

      </div>

      <div class="bottom-column">
        <div class="bottom-header">SUPPORT</div>
        <a class"bottom-link" href="#Home">FAQ</a>
        <a class"bottom-link" href="#About">Contact us</a>
        <a class"bottom-link" href="#Sitemap">Shipping</a>
        <a class"bottom-link" href="#Blog">Returns</a>
      </div>   
    </footer>

CSS:

     .footer {
      position: relative;
      width: 1024px;
      height: 200px;
      background: #f5f5f5;
      margin: 0 auto;
      top: 1255px;
      border-top: 1px solid #d8d8d8;
    }

    .bottom-header {
      font-size: 14px;
      line-height: 20px;
      position: relative;
      color: #333;
      text-transform: uppercase;
    }

    .bottom-column {
      float:left;
      display: inline;
      font-size: 15px;
      width: 105px;
      height: 160px;
      padding: 20px;
    }

    .bottom-column a {
      text-decoration: none;
      color: #6a6a6a;
      float: left;
      left: 50px;
      padding-top: 10px;
      font-size: 13px;
    }

Upvotes: 0

Views: 7021

Answers (2)

Richard Shi
Richard Shi

Reputation: 625

Try the following:

.bottom-column a {
    display: block; //To force the text links to stack on top of one another
}

And remove the float:left from .bottom-column a {...}. The float is causing the links to be lined up against each other.

Here's a Fiddle.

Upvotes: 2

ACruz
ACruz

Reputation: 101

Try adding 'clear: both;' to .bottom-column a

.bottom-column a {
  text-decoration: none;
  color: #6a6a6a;
  float: left;
  left: 50px;
  padding-top: 10px;
  font-size: 13px;
  clear: both;
}

Upvotes: 0

Related Questions