Question

I’m having an issue with my layout, where I have an <h1> element sitting above an image. Circumstances make me unable to edit the HTML, so how can I position the <h1> element beneath the image?

My code looks like this:

<h1>Razer Press Release</h1>
<img src="/images/trongamingkeyboard.jpg" />

But basically, in the link, you can see the “Razer Press Release” text that I would like moved directly beneath the image. I just don’t know how!

Answer 1

Use CSS to swap the vertical positions of the two elements.

<h1 style="position: relative; top: 500px;">Razer Press Release</h1>
<img style="position: relative; top: -18px;" src="/images/trongamingkeyboard.jpg" />

If you can’t use inline styles (which is simplest) these selectors will work, given the markup in that page:

#cta > h1:first-child {
    position: relative;
    top: 500px;
}

#cta > h1:first-child + div > img {
    position: relative;
    top: -18px;
}