Search code examples
htmlcssfooter

HTML CSS Footer: Exact Same specifications, but different vertical alignment; why?

I have a footer with two float-left divs beside each other; one side for some text, the other for some links. They are both linked up to the same CSS, with exact same specs, but the left side text is lower than the right side links.

I've removed padding and margins and borders from a bunch of stuff, but I can't seem to figure it out.

Thanks for the help, here's my code:

HTML

 <!--FOOTER-->
    <footer>
        <hr class="plain bgcolor black">
        <div class="footerl">
            <p class="grey footer">
            <span style="font-family:Bodoni MT W01 Bold, Times New Roman, serif">B O R I S &nbsp; K H O L O D O V</span> &nbsp;&#183;&nbsp; Real Estate Broker
            </p>
        </div>
        <div class="footerr">
            <navigation>
                <a class="grey footer" href="index.html">Home&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="listings.html">&nbsp;&nbsp;&nbsp;Listings&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="approach.html">&nbsp;&nbsp;&nbsp;Approach&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="press.html">&nbsp;&nbsp;&nbsp;Press&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="contact.html">&nbsp;&nbsp;&nbsp;Contact</a>
            </navigation>
        </div>
        <hr class="plain bgcolor black">
    </footer>
    <!--FOOTER-->

CSS

navigation{
    padding: 0px;
    margin: 0px;
    border: 0px;
    }

footer{
    padding: 0px;
    margin: 0px;
    border: 0px;}

div.footerl{
    height: 25px; 
    width: 500px;
    float: left;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0px;
    }

div.footerr{
    height: 25px; 
    width: 500px;
    float: left;
    text-align: right;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0px;
    }

.footer{
    font-family: "DIN Next W01 Light", Helvetica, Arial, sans-serif;
    font-size:14px;
    margin: 0px;
    padding: 0px;
    text-decoration:none;}
Solution

  • The different font family/capitalization may be offsetting text on the left very slightly compared to the links on the right.

    Add a line-height property to div.footerl to push down the text a bit:

    div.footer1 {
    line-height: 1.5em;
}