Positioning footer logo

Question

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?

Answer 1

Try this:

HTML:

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

CSS:

.siteFooterBar {
    position: fixed;
    bottom: 0;
    padding-top: 10px;
    width: 100%;
    box-shadow: 0px 0px 25px rgb(207, 207, 207);
    height: 78px;
    color: #9B9B9B;
    background: #F3F3F3;
}

.content {
    display: block;
    padding: 10px;
    margin: 0px auto;
    text-align: center;
    font: 25px Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    width:250px;
}
.foot {
 display:inline;
    line-height: 70px;
}
.content img {
 height:70px;
    width: 70px;
    float:left;
}

URL: http://jsfiddle.net/5c7DY/6/

Enjoy your code!

Answer 2

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