Responsive image and text - html

Question

I'm trying to create a responsive <div> with a maximally square svg image in it, and some text next to it. What I have so far is (with the help of answers to several Stackoverflow questions asked by others):
<div class = 'outer'>
<div class = 'inner'>
<svg width = '100%' height = '100%' viewBox = '-35 -35 70 70'
preserveAspectRatio = 'xMaxYMin meet' id = 'yadayadayada'
xmlns = "..." version = "1.1" xmlns:xlink = "..." xmlns:svgjs = "...">...</svg>
</div>
</div>
where the svg image is generated by SVG.js:
let image = SVG () . size ('100%', '100%')
. addTo ('.inner')
. id ('yadayadayada')
. viewBox (-35, -35, 70, 70)
. attr ({preserveAspectRatio: 'xMaxYMin meet'});
//
// SVG drawing stuff
//
With the following CSS:
div.outer::before, div.outer::after {
height: 5%;
display: block;
content: "";
margin: 0 0 0 0;
}
div.outer {
margin: 0 0 0 0;
padding-left: 5%;
padding-right: 5%;
width: 90%;
height: 90%;
}
div.inner {
width: 100%;
height: 100%;
position: relative;
}
This creates a view like this:
+------------+---------------+
| | |
| | |
| | |
| Blank | SVG |
| | |
| | |
| | |
+------------+---------------+
That is, a <div> filling the entire window, with a 5% margin on each side, and a square SVG image on its right hand side (or left hand side if I change the preserveAspectRatio to xMinYMin meet). This scales as I want when changing the size of the window. So far, so good.
But now, I want to have some text next to the image (either right or left, depending on where the image is located), with the image still fully visible, and the same size. And that's where I get stuck. It's easy to get some text there using some absolute positioning, but if I add some text inside the inner div, this has the effect of shifting down the image, so the top of the image is below the bottom of the text (even if the text is a single line, shorter than the width of the white space).
I think what is happening is that the <svg> isn't actually square, but has the same size as the inner div, making that it gets pushed out of that div if text is getting added.
Can someone suggest what to do, so I can have a maximally sized square image, with text next to it, and things still being responsive? I don't really care what happens if the window gets resized to nearly square, or to portrait mode. The intended purpose is for slides for a presentation, where I still want to have the slides look good if I switch the browser to/from full screen, remove toolbars, or connect my laptop to a beamer -- in all cases, the window will be in landscape mode, and not close to being a square.

Answer 1

I'm trying to create a responsive <div> with a maximally square svg
image in it, and some text next to it.
Do you want to put your text where blank is currently?
If so, it sounds like your best approach will be CSS Grid.
Start by introducing an extra <div> for the text you want to add:
<div class = "outer">
<div class = "textbox">
</div>
<div class = "inner">
[... CONTENTS OF .inner HERE...]
</div>
</div>
Then give .outer:
a display value of grid
one row
two equal columns
with the following CSS:
.outer {
display: grid;
grid-template-rows: 45vw;
grid-template-columns: 45vw 45vw;
}
This will automatically give:
.textbox a width of 45 viewport width units (ie. 45% the width of the viewport)
.inner a width of 45 viewport width units