Need help on CSS/HTML (please)

Richard · September 30, 2015

I'm having a problem maintaining the correct position of an HTML item on my home page when resizing the browser. It's not in production yet, so here are some screen shots from my Preview:

The item in question is the slideshow button on the right, above the galleries. This is what it looks like in a large browser window:

The button is in an HTML container set to 100% width and above the galleries widget. It has a big left margin set to force the button to the right side.

When I reduce the size of the browser window from the right, the button stays in the correct place relative to the galleries for a while, but at a certain point (I think it's when the images in the galleries resize) the text on the button wraps to two lines:

If I reduce the browser width further, the button is no longer visible without horizontally scrolling the window:

I'd like the button to simply maintain the same position relative to the right edge of the galleries as the window is resized.

I'm sure there's a simple way to do this, but my knowledge of layout and CSS is spotty at best. I sure would appreciate some help here.

Thanks.

Hikin' Mike · September 30, 2015

You don't want to force it to the left margins, so remove that. You need to float it to the right and/or 'text-align:right'. Without seeing your site, you'd want to use something like this. Change the '.your-widget' to what your widget is.

.your-widget {
    width: 100%;
    float: right;
    text-align: right;
    }

Richard · September 30, 2015

Cheers, Mike. Float was all it took.

Many thanks.

Need help on CSS/HTML (please)

Comments