Search code examples
htmlcssalignmentcss-positionfooter

Positioning footer logo

So I want to add a logo in the footer. It needs be right besides the text on its left side.

<div class="siteFooterBar">
    <div class="content">
        <img src="http://i.imgur.com/nuRmQJX.png" width="70px" height="70px" align="left">
            <div class="foot">2014 © All rights reserved.</div>
    </div>
</div>

Using margin-left/margin-right for both does solve it as different resolutions will render the fixed length differently. Here is a fiddle and a graphical example of what I want to achieve.

What's the best approach towards this? Would it be practical if I used % with margin-left/margin-right?

Solution

  • Take align="left" from the image as so: 

    <div class="siteFooterBar">
    <div class="content">
        <img src="http://i.imgur.com/nuRmQJX.png" width="70px" height="70px">
            <div class="foot">2014 © All rights reserved.</div>
    </div>
</div>

    Than add some css: 

    .foot { display: inline-block; line-height: 70px; vertical-align: top }

.img { display: inline-block;  }

    And the JsFiddle