Utilize CSS to wrap text around an image and adjust positioning at a specific breakpoint

Question

Utilize CSS to wrap text around an image and adjust positioning at a specific breakpoint

Having a bit of a challenge with responsive css here.

I'm working on articles where there's text on the left and an image on the right, with the text wrapping around the image. However, at a certain breakpoint I need the body copy to appear above the image.

Here's the code I've been using:

<section class="news-article-body">
    <img src="img/news-article-image.jpg" alt="" title=""/>
    <p> 
      Lorem Ipsum...
    </p>
</section

Css:

.news-article-body img {
    float: right;
}

It looks good. The image floats to the right and the text wraps nicely when necessary. But since the image tag is before the text, I can't get the image to be positioned below the text at the breakpoint.

Essentially, I need the text to wrap properly with this html (Or any other solution):

<section class="news-article-body">
    <p> 
      Lorem Ipsum...
    </p>
    <img src="img/news-article-image.jpg" alt="" title=""/>
</section

Does anyone know of a technique that could help me achieve this? I've been struggling to find a solution. Thanks

html css text

Answer 1

Answer №1

To achieve this layout, you can utilize the display:flex property and adjust the order of elements:

When experiencing a breakpoint, your HTML structure should look like this:

.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}

If needed, you can also employ JavaScript and float clearing techniques for assistance: VIEW DEMO 1 or VIEW DEMO 2

Here is an example of the code implementation:

onload=function() {
  document.getElementById('myImg').style.position='absolute'; // remove img from normal flow
  var myoffsetHeight = document.getElementById('myP').offsetHeight; // retrieve height of <p>
  document.getElementById('myT').style.height=myoffsetHeight +'px'; // set floating element's height
  document.getElementById('myImg').style.position='static'; // return img to normal flow
}

Your HTML structure should resemble something like this:

<section >
  <b id="myT"></b>
  <img src="http://lorempixel.com/250/100/" id="myImg"/>
  <p id="myP">Lorem ipsum dolor sit amet...</p>
</section>

In both examples provided, don't forget to define and customize your breakpoints accordingly.

Answer 2

To achieve this layout, you can utilize the display:flex property and adjust the order of elements:

When experiencing a breakpoint, your HTML structure should look like this:

.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}

If needed, you can also employ JavaScript and float clearing techniques for assistance: VIEW DEMO 1 or VIEW DEMO 2

Here is an example of the code implementation:

onload=function() {
  document.getElementById('myImg').style.position='absolute'; // remove img from normal flow
  var myoffsetHeight = document.getElementById('myP').offsetHeight; // retrieve height of <p>
  document.getElementById('myT').style.height=myoffsetHeight +'px'; // set floating element's height
  document.getElementById('myImg').style.position='static'; // return img to normal flow
}

Your HTML structure should resemble something like this:

<section >
  <b id="myT"></b>
  <img src="http://lorempixel.com/250/100/" id="myImg"/>
  <p id="myP">Lorem ipsum dolor sit amet...</p>
</section>

In both examples provided, don't forget to define and customize your breakpoints accordingly.

Answer 3

Answer №2

To effortlessly incorporate an <img> tag into the start of your content, simply add align="right" to have the text flow around it seamlessly.

Answer 4

To effortlessly incorporate an <img> tag into the start of your content, simply add align="right" to have the text flow around it seamlessly.

Utilize CSS to wrap text around an image and adjust positioning at a specific breakpoint

Answer №1

Answer №2

Similar questions

Retrieves a single data point through an AJAX request

"Utilizing jQuery to achieve vertical center alignment within a div

Is there a way to resolve the issue of the hero image appearing behind the text box without relying on media queries?

What is the best way to eliminate the appearance of the blue square that shows up when the button is clicked on smaller screens?

optimal scaling at the center, not the edge

A cutting-edge JQuery UI slider brought to life using HTML5's data-* attributes and CSS class styling

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Overlapping CSS Menu

What causes the value from the <input> form to be duplicated in all other inputs?

How can I remove the arrow from a CSS selector?

Trouble with AngularJS not redirecting to home page after logging in

Issues with CSS3 keyframe animations failing to function in Firefox and IE

How can I use a CSS file in PHP to conceal the folder structure?

What potential issues could arise from utilizing a numerical value as an identifier or class in an HTML4, XHTML, or HTML5 webpage?

Is it feasible to remain on the page and receive a confirmation message once the file has been successfully uploaded

Tips for shrinking the circumference of a circle

PHP and AJAX successfully retrieving data, but failing to redirect to new page

Specify a maximum length for numerical input and permit the use of a plus sign

Database information displayed in a text area with spaces before each entry

Interacting with a Bootstrap menu