Verticaly aligning content in the footer

Hi I have a site: http://www.joe-blogggs.co.uk/ladpwebsite/index.html

all is well except for the footer, I’m trying to vertically centre the icons, navigation and span within the footer… currently their a bit messed up…

My understanding was that if I set the height of the footer at 60px and then set the line height of the span and nav to 60px and set the v-align to middle it would solve this issue…

is this correct? so far I’ve tried this and it doesn’t seem to work…

any help on this would be great…

thank you

O

Hi, I haven’t gone to your site, but the height/line height trick DOES work, but the element must be block level first. Adding display:block should fix that little thing up :).

Hi,
The main problem is the right floated ul being last in the footer source order. Floats always need to come first in the source if other elements are to sit on the same vertical plane.

I would suggest wrapping the anchors (with the nested images/icons) in a “p” tag and floating it left. Then what I mentioned above will not be an issue.

As far as the icons are concerned you can target those images through the #footer p style and set the v-align to middle on those.

You have some errors in the image size attributes of your live page also, you have set “px” and you are missing the “=” on one of them. You intended to set the image dimensions at 50px via the html so that is what I will work with.

You can set a 50px height on the footer with 5px top and bottom paddings to bring it to 60px total. Set a 50px line-height on the footer and it will inherit to all the child elements.

This will get you what you are after.
(I noticed you were using a reset so I used one also)

Hope that helps :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>V-A footer</title>

<style type="text/css">
* {margin:0;padding:0;}/*for demo only*/

body {
    background: #fff;
    font-size:100%;
}
img {border:0}

#wrapper {
    width:900px;
    margin:0 auto;
}
#footer {
    height:50px;/*60px with padding*/
    line-height:50px;
    padding:5px 0;
    background:#000;
}
#footer ul {
    list-style:none;
    float:right;
}
#footer li {
    float:left;
    margin-right:10px;
}
#footer li a {
    float:left;
    height:50px;
    color:#fff;
    text-transform:uppercase;
    text-decoration:none;
    font-size:14px;
    font-weight:normal;
}
#footer li a:hover {
    color:#697813;
}
#footer p {
    float:left;
    height:50px;
    background:#333;
}
#footer p img {vertical-align:middle;}

#footer span {color:#fff;}

</style>
</head>
<body>

<div id="wrapper">   
    <div id="footer">
        <p>       
            <a href="#" title="Visit louise Austins Facebook Page"><img src="__images/Louise_austin_design_facebook.png" alt="Facebook Icon" width="50" height="50"/></a>
            <a href="#" title="Visit louise Austins Twitter Page"><img src="__images/follow_louise_austin_on_twitter.png" alt="twitter Icon" width="50" height="50"/></a>
            <span class="follow">Follow LADP-DESIGN</span>
        </p>
        <ul>
            <li><a href="sitemap.html" title="LADP Sitemap">Sitemap  |  </a></li>
            <li><a href="sitemap.html" title="LADP Terms and Conditions">T&amp;C's</a></li>
        </ul>
    </div><!-- End footer Div -->
</div>

</body>
</html>