Coler234 Coler234 - 3 months ago 12
CSS Question

Keep image stationary, that's location is relative to nearby text

In the very middle of the screen I have a piece of text, along with an image. When the text gets longer, the image is forced to move the right, which is what its supposed to do. But what I want it to do, is keep the image in the same spot, and make the text shift over to the left instead.

(I will also be adding more names so I need this fix to be universal, not like manually changing it for each piece of text.)

(It might be hard to see, but its noticeable, and yes I'm using a template...)

Image one

Image two

My site - Updated link

I tried messing with the HTML to get the margin-right once the page is fully loaded, then when it updates the text change the margin-right to that, but it did absolutely nothing.

Any help is appreciated, I have no idea how to fix this issue.

Answer

What about this?

#banner .content {
        display: inline-block;
        margin-right: 1%;
        max-width: 95%;
        padding: 6em;
        position: relative;
        text-align: right;
        vertical-align: middle;
        z-index: 1;
        float: left;
        width: 66%;
}