Display icons and text on the same line

Question

I'm trying to get the text (Home, About Us, Cheese) etc to display to the right of the social media icons, so that the base of the text is aligned with the base of the icons and they appear on the same line.

How do I do this?

My code is in fiddle here http://jsfiddle.net/pnX3d/

    <div class="grid_5" id="social_icons">
        <a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
        <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
        <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
        <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

    </div>

    <nav class="topmenu omega">
        <ul>
        <li><a href="#">Home</a> |</li>
        <li><a href="#">About Us</a> |</li>
        <li><a href="#">Cheeses</a></li>
        </ul>
    </nav>

Answer 1

I have achieved that with the following code:

 .container-header{ line-height: 1.22; } #social_icons { padding: .5em; display: inline-block; } .topmenu li { display:inline-block; font-size: 1.5em; text-align: right; } .topmenu.omega{ float:right; } ul{ margin: 0; } li>a { font-size: 20px; } 

 <div class="container-header"> <div class="grid_5" id="social_icons"> <a href="http://fontawesome.io/icon/address-book/" target="blank"><img src="img/facebook.png" alt="Facebook"></a> <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Twitter"></a> <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Pininterest"></a> <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a> </div> <nav class="topmenu omega"> <ul> <li><a href="#">Home</a> |</li> <li><a href="#">About Us</a> |</li> <li><a href="#">Cheeses</a></li> </ul> </nav> </div> 

Answer 2

These changes in your CSS should do the trick:

#social_icons {
    padding: .5em;
    line-height: 1.22;
    float:left;
    vertical-align:bottom;
}

.topmenu li {
    display:inline-block;
    font-size: 1.5em;
    text-align: right;
    line-height: 1.22;
    float:left;
    vertical-align:bottom;
}

Answer 3

Add float: left to #social_icons and .topmenu li .

Here's a demo: http://jsfiddle.net/ZsJbJ/ .

Hope that helps!

Answer 4

Thanks for your input, but I actually ended up using the following. As this isn't a production site and I'm only experimenting I wanted to use flex columns. The below actually reduces the code required as well.

HTML

<div id="social_icons">
    <a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
    <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
    <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
    <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

    <nav class="topmenu omega">
        <ul>
            <li><a href="#">Home</a> |</li>
            <li><a href="#">About Us</a> |</li>
            <li><a href="#">Cheeses</a></li>
        </ul>
    </nav>
</div>

CSS

#social_icons {
    padding: .5em;
    line-height: 2.7;
    -webkit-columns: 150px 2;
    font-size: 1.2em;
}

.topmenu li { 
    display:inline-block;
}

Answer 5

Float the .topmenu to right and #social_icons to the left. Give padding-left:0; for the ul and give display:inline-block for .topmenu . Please check it in fiddle http://jsfiddle.net/pnX3d/10/