CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coler234
Coler234

Reputation: 67

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.

Upvotes: 1

Views: 57

Answers (2)

Brian Peacock
Brian Peacock

Reputation: 1849

You can solve this issue by defining the width property for the containing content layer, and then floating the image and the text to the right.

For example, if you want the right-hand side of the text to be aligned to the center of the page your image + it's left-hand margin needs to be half the width of the containing #banner .content layer.

With your image being 18rem square with a left-margin of 3rem your containing #banner .content div needs to be 42rem wide ((18 + 3) * 2).

#banner .content {
    position: relative;

    width: 42rem;
    height: 18rem;

    text-align: right;
    vertical-align: middle;

    /* center div.content */
    margin: 0 auto;
    clear: both;
    display: block;

    z-index: 1;
}

#banner .content .image {
    width: 18em;
    height: 18em;

    border-radius: 100%;
    vertical-align: middle;

    margin-left: 3rem;
    display: inline-block;
}

Content inside .content slides to the right with the span.image locked to its right-hand edge. As long as the text-container's width (header) does not exceed half the width of `.content' it will remain right-aligned 3rem from images left-hand side. Avoid using css-padding for positioning control and use css-margin properties instead.

Upvotes: 0

user3470625
user3470625

Reputation:

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%;
}

Upvotes: 1

Related Questions