CODEWITHSUNDEEP
htmlcssfooter
Mitchell Conrad
Mitchell Conrad

Reputation: 51

Why doesn't the text in my footer line up?

Recently I have been making a footer for a website that me and my friends are making and the text isn't lined up. I wanted the copyright to be at the bottom and the links and contact information to be all next to each other, sort of like the footer of stackoverflow. The footer has not been working the way that I thought that it would be. I have tried many ways to change the where the text is but it doesn't seem to work. It should be a simple fix so if you have the time please take a look at the code. Here is the code:

<!DOCTYPE html>
<html>
<footer>
    <div class="footer">
        <div class="contact">
            <h3> Contact Us: </h3>
            <p>[email protected]</p>
        </div>
        <div class="popular">
            <h3> Popular Games: </h3>
            <p><a href="#">Happy Wheels</a></p>
            <p><a href="#">Flappy Bird</a></p>
            <p><a href="#">Impossible Quiz</a></p>
        </div>
        <div class="footerNav">
            <h3>Pages</h3>              
            <p><a href="http://www.freeninjagaming.site50.net">Home</a></p>
            <p><a href="#">Games</a></p>
            <p><a href="#">About Us</a></p>
        </div><br>
        <div class="copyright">
            <p> Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad </p>
        </div>
        </div>
        <style>
        footer{
            clear: both;
            font-family: Arial;
            text-align: center;
            border-top: 1px solid black;
        }
        .contact {
            float: left;
        }
        a {
            text-decoration: none;
            color: #c23b3b
        }
        a:hover{
            color: darkred;
        }
        .footerNav {
            float: right;
        }
        </style>
</footer>
</html>

Upvotes: 1

Views: 538

Answers (3)

Nitin Niraj
Nitin Niraj

Reputation: 23

<!DOCTYPE html>
<html>
<footer>
    <div class="footer">
        <div class="contact">
            <h3> Contact Us: </h3>
            <p>[email protected]</p>
        </div>
        <div class="popular">
            <h3> Popular Games: </h3>
            <p><a href="#">Happy Wheels</a></p>
            <p><a href="#">Flappy Bird</a></p>
            <p><a href="#">Impossible Quiz</a></p>
        </div>
        <div class="footerNav">
            <h3>Pages</h3>              
            <p><a href="http://www.freeninjagaming.site50.net">Home</a></p>
            <p><a href="#">Games</a></p>
            <p><a href="#">About Us</a></p>
        </div><br>
        <div class="copyright">
            <p> Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad </p>
        </div>
        </div>
        <style>
        footer{
            clear: both;
            font-family: Arial;
            text-align: center;
            border-top: 1px solid black;
        }
        .contact, .popular, .footerNav {
            float: left;
        }

        .copyright {
          clear:both;
          float:left;
          }

        a {
            text-decoration: none;
            color: #c23b3b
        }
        a:hover{
            color: darkred;
        }

        .footer div {
           margin-left:10px;
          margin-right:10px;
          }
        </style>
</footer>
</html>

Upvotes: 0

Code Maverick
Code Maverick

Reputation: 20425

I removed float and used display:inline-block to the elements you wanted side-by-side. I then added display:block to the copyright to make it its own line. I also added an H3 tag for Navigation so that they would all line up nice with vertical-align: top.

See working jsFiddle demo

OUTPUT

enter image description here

HTML

<footer>
    <div class="footer">
        <div class="contact">
             <h3> Contact Us: </h3>

            <p>[email protected]</p>
        </div>
        <div class="popular">
             <h3> Popular Games: </h3>

            <p><a href="#">Happy Wheels</a>

            </p>
            <p><a href="#">Flappy Bird</a>

            </p>
            <p><a href="#">Impossible Quiz</a>

            </p>
        </div>
        <div class="footerNav">
             <h3> Navigation: </h3>

            <p><a href="http://www.freeninjagaming.site50.net">Home</a>

            </p>
            <p><a href="#">Games</a>

            </p>
            <p><a href="#">About Us</a>

            </p>
        </div>
        <div class="copyright">
            <p>Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad</p>
        </div>
    </div>
</footer>

CSS

 footer {
     clear: both;
     font-family: Arial;
     text-align: center;
     border-top: 1px solid black;
 }
 footer div {
     display: inline-block;
     vertical-align: top;
     margin-right: 20px;
 }
 footer div:last-child {
     margin-right: 0;
 }
 footer .copyright {
     display: block;
 }
 .contact {
 }
 a {
     text-decoration: none;
     color: #c23b3b
 }
 a:hover {
     color: darkred;
 }

Upvotes: 1

Morklympious
Morklympious

Reputation: 1095

You have some questionable styling choices, but that's okay! We're all here to learn. I have a JSfiddle that you might use as a starting point. I basically gave a style rule to give all divs inside of footer a property of display: inline-block, which will put them all in a line if there's room to accommodate them.

Hope this helps!

Upvotes: 0

Related Questions