Making a footer for a page but some CSS does not work out

Question

So I am trying to make a footer for a webpage. Here is what I have:

What I want is (I did my best to demonstrate it):

(The images seem to be too small because it is too long. If you don't mind, zoom in your browser.)

Then here comes my HTML structure:

<div id="footer">
    <table id="info">
        <tr>
            <td colspan="3">You're here: 
            <div id="where"></div></td>
        </tr>

        <tr>
            <th>
<div id="additional-links">
<ul class="nobullet">
            <li><a href="">Intro</a></li>
                <li><a href="">Hiring</a></li>
                <li><a href="">Collab</a></li>
                <li><a href="">Credits</a></li>
                
                <div id="shared">
                    <span style="color: #fff;">|</span>
                    <a href=""><img src="fl.jpg" alt="facebook"></a>
                    <a href=""><img src="tl.jpg" alt="twitter"></a>
                    <a href=""><img src="tml.png" alt="tumblr"></a>
                    <span style="color: #fff;">|</span>
                </div>
            </ul>
</div>
</th>
        </tr>
        
        <tr>
            <td colspan="3">&copy;2013
            </td>
        </tr>
    </table>
</div>

Then the corresponding CSS:

div {
    padding: 0;
    margin: 0;
    text-align: center;
}

#footer {
    width: 100%;
    height: 15%;
    background-color: #dcd9ca;
}

#info {
    text-align: center;
    width: 100%;
    min-height: 100%;
}

.nobullet li {
    display: inline;
}

.nobullet li a {
    text-decoration: none;
    color: brown;
}

#shared {
    float: right;
    position: relative;
}

#shared img{
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

So my question is: how do I make the changes?

I hope I have made myself clear.

Answer 1

I agree with the comment made by @vishalkin that you should not use the table structure. Even if you did, you have an issue that make yours HTML invalid. The #shared div cannot be a parent of an ul. You need to wrap this in a li.

Here is my solution on jsfiddle.net.

Here is the HTML:

<div id="footer">
    <p>You're here:</p>
    <div id="footerLinks">
        <ul id="links">
            <li><a href="">Intro</a></li>
            <li><a href="">Hiring</a></li>
            <li><a href="">Collab</a></li>
            <li><a href="">Credits</a></li>
        </ul>
        <ul id="shared">
            <li>| <a href=""><img src="" alt="facebook"/></a></li>
            <li><a href=""><img src="" alt="twitter"/></a></li>
            <li><a href=""><img src="" alt="tumblr"/></a> |</li>
        </ul>
    </div>
    <p>&copy;2013</p>
</div>

Here is the CSS:

body { background: #060; width: 1024px; }

div { padding: 0; margin: 0; text-align: center; }

#footer { width: 100%; text-align: center; background-color: #dcd9ca; position: relative; }

#footer ul,
#footer li { margin: 0px; padding: 0px; }

#footerLinks { position: relative; }

#links { list-style: none; display: inline; width: auto; }

#links li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }

#links li > a { display: block; width: 150px; text-decoration: none; color: brown; text-align: center; font-weight: bold; }

#shared { position: absolute; top: 0px; right: 75px; /* your margin from the right */ list-style: none; color: #fff;}

#shared li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }

#shared img { border: 0px; width: 24px; height: 24px; vertical-align: middle; }

I threw in some extras for you:

• Border 0 on your social media images. Some browsers will show a giant blue border when images are inside links
• Made your footer links block, so that they are more accessible, rather than only taking up the text area
• In my jsfiddle, I put a width on the body, and a color, only to demonstrate the padding on the right of your social media links.

Answer 2

To solve both issues, you can make the shared div absolutely positioned.

<div id="additional-links">
    <div id="shared">
        <span style="color: #fff;">|</span>
        <a href=""><img src="fl.jpg" alt="facebook"></a>
        <a href=""><img src="tl.jpg" alt="twitter"></a>
        <a href=""><img src="tml.png" alt="tumblr"></a>
        <span style="color: #fff;">|</span>
    </div>
    <ul class="nobullet">
        <li><a href="">Intro</a></li>
        <li><a href="">Hiring</a></li>
        <li><a href="">Collab</a></li>
        <li><a href="">Credits</a></li>
    </ul>
</div>

You can adjust how far from the right the shared links are by changing the 150px setting below.

#additional-links {
    position: relative;
}

#shared {
    position: absolute;
    right: 150px;
}

Hope that helps.