Relative vertical alignment of objects side by side

[mikeydjay]

Hi

I guess this is not strictly a Muse issue as such but since I created the site in Muse, thought I'd ask here, on this page http://www.daviesm50.uk/room-1.html  of the site there are a number of text box and image elements.

There is a text box and image placed side by side, both are set to responsively adjust their height and width dynamically as the page expands or contracts in width.

What I was wondering is, is it possible to retain the relative vertical alignment between the text box and associated image, so for example if a text box is 400 pixels high and the image is 200 pixels tall, I have originally arranged them such that they are aligned at 50% of the text box, i.e. the middle of each element is in alignment, but as you narrow the browser width, both the text box and image adjust their width and height proportionally as expected, however the image stays "fixed" in it's position vertically, what I'd like to try and achieve and I don't know if this is even possible (web design not being my main job) is, as the page reduces in width and thus the text box and image change dimensions then the image element "moves" so that it retains it's relative position in relation to the height of the text box, that is it remains at 50% of the height of the text box, even though the text box is getting longer as the page width reduces.

Obviously I can create breakpoints to "realign" the objects but I'd have to set a breakpoint every few pixels I guess so that it doesn't become noticeable that the text box and image box are no longer aligned "correctly", if this is the only way to achieve this then that is fine.

Mike

[Günter Heißenbüttel · Accepted solution]

Hope, I understood correctly.

It seems, you know, why this is a very tricky undertaking! Due to the different scaling behaviours (text box = horizontally, but growing vertically, if necessary; images = scaling proportionally and so on)

NeverthelessI think, there is a way to achieve what you want. Look at this sample site:

http://rel-vertical-alignment.businesscatalyst.com/

I think, it works as you expect it to do. You can download the .muse file and the assets directly from this site. Please have a look at the images, it’s important!

If there are questions -> ask!

[mikeydjay]

That looks to be exactly what I want.

Thank you very much