Position image in four different possible places using CSS alone - html

Question

I'm going to really struggle to put this into words, but I will try. I have a div with some text in it, this text is dynamic so it can be different lengths depending on user input.
Now I want the option to be able to place an image in one of the following positions, depending on the value of a select dropdown, which will place the image either:
Above the text
Below the text
Left of text
Right of text
I'm wondering if there is an easy way to keep the markup the same, i.e
<img src="">
<span>Text</span>
But use CSS to vary the position of the image to any one of the above positions. It's important to note that the text width and height is dynamic, so it isn't possible to use exact pixels.
I would rather avoid using javascript if possible.

Answer 1

This is all you need:
.container {
display: flex;
}
#p-below:checked ~ .container {
flex-direction: column-reverse;
}
#p-right:checked ~ .container {
flex-direction: row-reverse;
}
#p-above:checked ~ .container {
flex-direction: column;
}
.container {
display: flex;
}
#p-below:checked ~ .container {
flex-direction: column-reverse;
}
#p-right:checked ~ .container {
flex-direction: row-reverse;
}
#p-above:checked ~ .container {
flex-direction: column;
}
/* everything below is totally optional */
.container {
justify-content: center;
align-items: center;
}
.container > .text {
border: 1px solid #424242;
padding: 1rem;
}
.container .image > img {
display: block;
}
<input name="position" type="radio" checked id="p-above" />
<label for="p-above">Above</label>
<input name="position" type="radio" id="p-below" />
<label for="p-below">Below</label>
<input name="position" type="radio" id="p-left" />
<label for="p-left">Left</label>
<input name="position" type="radio" id="p-right" />
<label for="p-right">Right</label>
<div class="container">
<div class="image"><img src="http://lorempixel.com/g/400/300" /></div>
<div class="text">Lorem ipsum dolor sit amet. Have as much text here as you like.</div>
</div>

Answer 2

Use float: left, right or none on the image (using a stylesheet). You cannot place the image below the text with CSS.