Ofek Agmon Ofek Agmon - 1 year ago 58
CSS Question

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

I have an

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

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

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

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

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

Answer Source

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"/>

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download