Aligning two images in a div in a footer

HTML & CSS
1

Hey guys for some reason I am struggling with this. I have a footer and I’m adding in a marketing banner. For example, see home page:

On the footer I’d like to add a 2nd 120x60 ad button to the left of the current one that is there. This theme is coded in wordpress and teh footer is a widget. Right now, it’s just a footer…

<br /><div align="right"><a href="http://www.usoutdoor.com/k2-skis/"><img src="http://www.alpinezone.com/images/banners/usoutdoor_k2skis.gif" alt="K2 Skis at USOUTDOOR.com" /> </a></div>

I have a second image same size and I want it directly to the left of the current one. For the life of me I can’t get it right. It either falls underneath or overlaps.

2

Hey @Parafly9;
We’ve built a new product at SitePoint to help people fix broken CSS in real-time. Your issue looks like one that we could easily help you fix immediately.
One of our CSS experts is online now and ready to help if you’re interested in giving it a go.

Edit: I’m removing the link to the product while we fine tune and develop further. Will keep you posted.

3

Further to my last post, I actually went ahead and used your post as a test case for the product.
You can see how it went down and get your solution here http://codefix.sitepoint.com/requests/19/edit
(note this is currently a testing product only so doesn’t look flash in IE)

Let me know how you go with it. :slight_smile:

4

Try it using the Div attribute and hopefull it will be helpful in making things better.
<div class=“footer-icons”>
<div id=“footer-twitter”>
<img src=“images/twitter.png” width=“40” alt=“”>
</div>
<div id=“footer-fb”>
<div class=“fb-like” data-href=“http://facebook.com/user” data-send=“false” data-layout=“button_count” data-width=“160” data-show-faces=“false” data-font=“arial”></div>
</div>
</div>

5

Oh cool. was just going to try it out actually but I"ll give it a whirl. Cool service idea guys.

6

OK trying it now but for some reason my 2nd image isn’t showing up :confused:

I originally tried the same thing (just did a 2nd img within the same DIV) but it vanishes.

7

OK you know, I don’t really have enough room where I want to put it anyway because of th eimage in the way. Trying to put it in the very bottom of the footer instead. See here:

Except now the image sits all the way at the bottom. Tried putting in a new class to vertical-align:middle but it didn’t work :confused:

8

I’m a bit confused now :slight_smile:

Did you implement the code that Alex supplied via CodeFix but it’s still not working for you?

We’re going to be testing the service again in 90mins if you want to try it for yourself.

9

bizarre. I have no idea what I’m doing, just trial and error. I got rid of any <P> or <div> tags around the images and now they line up nicely at the bottom. OK.

10

Hi, That’s because <a> and <img> are inline elements by default. However it is not good practice to have an inline element running into a block element, some browsers will give undesired results with that.

I would wrap the anchors (which the img is nested in) with a <p> as you had it. The problem was the width you had on your #footer p, remove that width and let the floats shrinkwrap, then set a right margin on the p.

As it is now, those anchors/images are sliding under the p.copy float.

If you need more control on the left <p> which contains the text, then utilize that .copy class that is already on it.

#footer p {
    color: #FFFFFF;
    float: left;
    font-size: 11px;
    [COLOR=#0000ff]margin-right: 20px;[/COLOR]
    padding-top: 24px;
   [COLOR=#ff0000] /*width: 280px;*/[/COLOR]
}
p.copy {
    [COLOR=#0000ff]margin-right: 80px;[/COLOR]
}

<div id="footer-bottom" class="clearfix">
    <p class="copy">
        Copyright &copy;1998 - 2013 AlpineZone.com and
        <br>
        Double Black Diamond, LLC. All rights reserved.
    </p>
    <p>
        <a href="http://www.theskimonster.com">
        <img src="http://www.alpinezone.com/images/banners/skimonster.jpg" alt="The Ski Monster">
        </a>
    </p>
    <p>
        <a href="http://www.usoutdoor.com/k2-skis/">
        <img src="http://www.alpinezone.com/images/banners/usoutdoor_k2skis.gif" alt="K2 Skis at USOUTDOOR.com">
        </a>
    </p>
    <div class="ir alpinezone">
        <a title="Go to homepage" rel="index" href="http://www.alpinezone.com">
        AlpineZone
        <span></span>
        </a>
    </div>
</div>
11

As it is now, those anchors/images are sliding under the p.copy float.

Sorry, that was not correct. Inline elements do not slide under floats, only blocks do.
I was seeing the img butt up to the text when I removed the width.

Another way to fix this is to move your width:280px; from #footer p to p.copy
That way your <p> tags with the anchor/img will not be picking up the widths and causing them to drop.

#footer p {
    color: #FFFFFF;
    [COLOR=#0000cd]float: left;[/COLOR]
    font-size: 11px;
    [COLOR=#0000cd]margin-right: 20px;[/COLOR]
    padding-top: 24px;
}
p.copy {
    [COLOR=#0000cd]width: 280px;
    [/COLOR][COLOR=#0000cd]margin: 0;[/COLOR]
}