Alternative to div inside an a tag, and padding right working with text-align right

Question

I have the following html:

<div id="image">
 <a href="link" title="some link"><img src="someimage"><p id="imagecaption">Some Link</p></a>
</div>

and css:

#mainimage a {
text-decoration: none;
border-bottom: 0;
}

#imagecaption {
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
}

This gives me a nice semi-transparent bar at the bottom of the image which I'm using to describe what is in the image. Both the image and bar are clickable and go to the same place.

I'm currently having two problems however. First is apparently you can't use things like <p> and <div> inside an <a> tag. What should I use instead?

Second, is ideally I would like to pad the text in the bar away from the right-hand edge by say 10px, just so the text isn't butted right up against the right-hand side. I can't just use padding-right: 10px on the bar since I already specified an width, it would cause problems with the border box model.

Any ideas? Thanks.

Answer 1

Consider using <span> instead of <p>

#imagecaption {
    position:absolute;
    left:0; right:0; bottom:0;
    padding-right:10px; /* avoids box sizing issue */
    text-align:right;
    background:#000; /* for compatibility, use background not background-color */
    background:rgba(0,0,0,0.6);
}

Answer 2

Here is how I would do it: http://jsfiddle.net/mikea80/jvse9/

<a href="#" title="some link">
    <div id="image">
        <img src="http://www.w3schools.com/images/pulpit.jpg" />
        <div id="imagecaption">Some Link</div>
    </div>
</a>

a {
    text-decoration: none;
    border-bottom: 0;
}
#image {
    width:304px;
    height:228px;
    margin:0 auto;
    border:1px solid #000;
    overflow:hidden;
}
#imagecaption {
    clear:both;
    position: relative;
    display:block;
    width: 100%;
    height:45px;
    text-align: right;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.6);
    padding:10px 10px 0 0;
    color:white;
    margin:-45px 0 0 -10px;
    overflow:hidden;
}