Utilize CSS to position an image in four various locations on a web page

Question

Utilize CSS to position an image in four various locations on a web page

Expressing this may be a challenge, but I'll give it a shot. Within a div, there is text that can vary in length based on user input.

My goal is to have the ability to insert an image in one of several positions, determined by the selection made in a dropdown menu:

Above the text
Below the text
To the left of the text
To the right of the text

I'm curious if there's a simple way to maintain the same structure in the markup, like so:

<img src="">
<span>Text</span>

And then use CSS to adjust the position of the image accordingly. It's worth noting that the dimensions of the text are variable, making it impractical to rely on specific pixel measurements.

If feasible, I would prefer not to resort to using javascript for this purpose.

html css

Answer 1

Answer №1

Everything you need is right here:

.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 completely 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

Everything you need is right here:

.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 completely 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 3

Answer №2

To position the image to the left, right, or center of the text, apply the float property in the stylesheet. It is not possible to use CSS to place the image below the text.

Answer 4

To position the image to the left, right, or center of the text, apply the float property in the stylesheet. It is not possible to use CSS to place the image below the text.

Utilize CSS to position an image in four various locations on a web page

Answer №1

Answer №2

Similar questions

Can someone help me with combining these two HTML and JavaScript files?

How can I stop full-page auto-scroll screenshot extensions from automatically scrolling?

Navbar active class not updating on jQuery page scroll

What is the limit of CSS includes that IE can process?

My content is being obstructed by a single-page navigation system

choosing and identifying the iframes for YouTube videos

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

The CSS "mask" property is experiencing compatibility issues on Google Chrome

Step-by-step guide on visually comparing two iframes for differences

Tips for creating a div that gracefully fades out its background image when hovered over, while keeping the internal content unaffected

The background color feature of a div is malfunctioning

What is preventing me from setting the height of a span to 0 pixels?

Dynamic HTML and CSS Table Alignment Techniques

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

Tips for creating animations with multiple elements that share the same classes

Retrieve information from a span element located within a div container

Items within a shared container are currently displaying stacked on top of each other

What are some strategies to prevent a fixed sidebar from obscuring content while zooming in?

Trigger the animation of a Div element when the cursor hovers over a different Div

The link tag cannot be used inside a division element