CSS - Dynamic Padding to the edge of a container - html

Question

Quick question here. I'm using a database and inserting an 'Image Name' on top of the image, as can be seen here:
Currently the padding of the Image Name is a number, however I want the padding to go until the border of the image. I tried doing 'Padding: right 250;', however clearly that won't work as the right padding starts at the end of the Image Name, which can be of varying length.
This made me start thinking that it needs to be Dynamic, and I am most certainly new to this. I've looked at various things online however can't seem to find similar things, which probably means I'm searching for the wrong thing. Anyway, any help woud be great.
Cheers,
Jake
**Current CSS (obviously lots more exists, but this is requried bit)- **
h3.imageName {
position: absolute; top: 278px; left: 10;
width: 100%;
z-index: 20;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
background: rgba(0, 0, 0, 0.7);
padding: 8;
}
**Current HTML - **
<h3 class="imageName"><span><?php echo $row['name']; ?></span></h3>

Answer 1

You could just give the whole text area a width if the image container width does not change. Also consider using bottom: 0; rather than top:# in this instance too.

Answer 2

You're using a span which is a display:inline; element which means it's width is not auto or 100%. You've added a background colour to the span meaning the background doesn't stretch to the edges of the parent element. Put your background on the parent being your h3 element. You've already used width:100%; and if you want it in the bottom left corner you should try this:
h3{position:absolute;left:0;right:0;bottom:0;background:#000000;background:rgba(0,0,0,0.7);}
Also I see you're adding a padding and position of 10px. So you could use a margin like so
margin:0px 10px;
This will keep the h3 element 10px alway from either side of the parent element.
to keep it 10px away from the bottom. Add bottom:10px; or even margin-bottom:10px; to be consistent.
Also we don't really need any styles on the span itself as it's a child element of the h3. So just put your styles from the span the the h3 so all together
h3{position:absolute;left:0;right:0;bottom:0px;margin:10px;marign-top:0px;background:#000000;background:rgba(0,0,0,0.7);color:#FFFFFF;font-family:Helvetica,Sans-Serif;padding:8px;}
Also! Don't forget to add a position relative to h3's parent element!
`position:relative;`

Answer 3

It's not entirely clear how this is structured but an absolutely positioned element is positioned according to the edges of the closest non-static positioned ancestor.
Unfortunately, this includes borders and padding.
One option would be to wrap them image in another element and apply the border to that:
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
}
.inner {
position: relative;
border: 10px solid pink;
}
img {
display: block;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<div class="inner">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>
</div>
As an alternative to the border...a box-shadow might be an option as this does not affect the size of the element.
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
position: relative;
}
img {
display: block;
box-shadow: 0 0 0 10px pink;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>