Ofek Agmon Ofek Agmon - 3 months ago 10
CSS Question

css - position img under h6 that will not be affected by h6 size

I have an

img
under a
h6
in a template, and I have multiple appearances of this template.

The
h6
size could be 1 line, two lines etc. As for now I have the
img
css like that:

ul.hourly li img {
padding-top: 20px;
}


The problem is obviously that if the
h6
size is 2 lines in one of the templates and on other ones its 1 line, the
img
's will not be on the same height.

How can I ahve the
img
with a fixed location, no matter what the
h6
size is?

Answer

You can add both the h6 and the img in same container, and give it position: relative, and position the img according to that:

<div class="container">
   <h6>My title</h6>
   <img src="image.png"/>
</div>

And the CSS:

.container {
   position: relative;
}

.container img {
   position: absolute;
   top: 100%;
}

So always the img will be positioned at the bottom of the container.