Text does not wrap around floated images, while floated images wrap around text

I've been experimenting with a two-column layout that combines images and paragraphs in a zig-zag pattern (identical elements diagonally across from one another).

My current code places two floated images to the left, along with two floated paragraphs.

The issue I'm facing is that the paragraph does not wrap around the floated images, whereas the image wraps perfectly around the floated paragraphs.

#wrapper {
  width: 70%;
  margin: 2% auto;
}
.photo {
  width: 48%;
  margin: 1%;
}
.para {
  width: 48%;
  margin: 1%;
}
.left {
  float: left;
  margin: 1%;
}
.header {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #D8E8ED;
}
.heading {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-weight: bold;
  font-size: 30px;
}
.tagline {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-size: 12px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Photo Blog</title>
  <link rel="stylesheet" type="text/css" href="photo.css">
</head>

<body>

  <div class="header">
    <h1 class="heading">Photo Blog</h1>
    <p class="tagline">A Collection Of Moments</p>
  </div>

  <div id="wrapper">


    <img src="img/DSC01683.JPG" class="photo left">

    <p class="para">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in pulvinar elit. Sed vitae justo congue neque consequat volutpat. Pellentesque leo ipsum, ultrices et sem ut, dignissim pellentesque libero. Curabitur in mattis nibh. Nulla non sollicitudin
      elit. Vivamus erat eros, egestas eget quam sit amet, malesuada laoreet sapien. Vestibulum at mattis lectus. Curabitur nunc augue, dictum eu fermentum non, dignissim eget diam.Donec facilisis eros felis, quis tristique libero ultricies tincidunt.
      Praesent ullamcorper eget dui non hendrerit.
    </p>

    <p class="para left">
      Nunc nec mauris a magna egestas vulputate in vel odio. Nunc purus ligula, suscipit et libero non, rutrum accumsan sapien. Mauris tortor massa, aliquam eu viverra id, interdum eu felis. Integer hendrerit massa quis est molestie consequat. Morbi ultricies,
      leo ut euismod cursus, ligula ante sagittis ex, non gravida dui sapien at nunc. Ut at quam faucibus, posuere tortor et, volutpat ante. Sed accumsan ultrices arcu, id efficitur nunc maximus eget.Quisque vel eros semper, mattis magna sed, dignissim
      leo.
    </p>

    <img src="img/DSC01716.JPG" class="photo left">

    <div class="left">
      <img src="img/DSC01780.JPG" class="photo left">
    </div>

    <p class="para">
      Nunc vel finibus ante. Curabitur finibus, libero et mattis mattis, massa nulla bibendum eros, in maximus lorem elit egestas massa. Duis tellus nibh, aliquet sed vehicula non, elementum at purus. In efficitur venenatis ipsum, eu aliquam ex faucibus a.
      Etiam blandit lobortis purus, et egestas diam lobortis a. Duis in iaculis turpis. Nullam turpis nisl, vulputate id mi eu, blandit auctor mi. Aenean volutpat venenatis est nec tempus. In cursus commodo tortor vitae ultrices. Vestibulum sed fermentum
      enim. Praesent ac risus eu magna finibus ultricies.Curabitur tristique lobortis sem ut pulvinar. Aliquam et felis nec ipsum tincidunt tempor. Mauris ut sollicitudin lorem. Donec faucibus nisl id iaculis congue.
    </p>

    <p class="para left">
      Morbi venenatis, tellus eu euismod efficitur, tellus velit posuere ante, eget tempus ex mi vitae sem. Nam et lorem pellentesque enim vehicula tempus. Maecenas et nibh et eros tincidunt pellentesque non ac ante. Maecenas et neque ex. Aenean placerat, odio
      eu faucibus auctor, orci nibh egestas mi, nec imperdiet augue leo quis massa. Vestibulum sed accumsan nulla. Aliquam aliquet sem ante, ut dignissim quam eleifend eu. Nam sit amet dolor iaculis, porttitor arcu in, scelerisque sapien. Nulla auctor
      bibendum tincidunt. Fusce blandit eros at auctor congue. Vestibulum magna justo, convallis ut volutpat vitae, fermentum at nisl.
    </p>

    <img src="img/DSC01820.JPG" class="photo left">
  
  </div>
htmlcsscss-floatword-wrap

Answer №1

To achieve a two-column layout, it is essential to correctly utilize floats and apply clear to them. Understanding the significance of clear for floated containers is crucial; you can refer to this informative answer and also check out this link.

It's important to note that when working with floating containers, it's necessary to clear them before proceeding to the next container. This approach helps in creating a fresh block formatting context, preventing any unforeseen behavior.

To clear the floats effectively, use the following code snippet:

<div style="clear:both"></div>

You should add the left class to both images and paragraphs after each image-paragraph row.

Take a look at the example below:

#wrapper {
  width: 70%;
  margin: 2% auto;
}
.photo {
  width: 48%;
  margin: 1%;
}
.para {
  width: 48%;
  margin: 1%;
}
.left {
  float: left;
  margin: 1%;
}

.header {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #D8E8ED;
}
.heading {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-weight: bold;
  font-size: 30px;
}
.tagline {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-size: 12px;
}
<body>

  <div class="header">
    <h1 class="heading">Photo Blog</h1>
    <p class="tagline">A Collection Of Moments</p>
  </div>

  <div id="wrapper">


    <img src="http://placehold.it/200x200" class="photo left">


    <p class="para left">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in pulvinar elit. Sed vitae justo congue neque consequat volutpat. Pellentesque leo ipsum, ultrices et sem ut, dignissim pellentesque libero. Curabitur in mattis nibh. Nulla non sollicitudin
      elit. Vivamus erat eros, egestas eget quam sit amet, malesuada laoreet sapien. Vestibulum at mattis lectus. Curabitur nunc augue, dictum eu fermentum non, dignissim eget diam.Donec facilisis eros felis, quis tristique libero ultricies tincidunt.
      Praesent ullamcorper eget dui non hendrerit.
    </p>

    <div style="clear:both"></div>

    <p class="para left">
      Nunc nec mauris a magna egestas vulputate in vel odio. Nunc purus ligula, suscipit et libero non, rutrum accumsan sapien. Mauris tortor massa, aliquam eu viverra id, interdum eu felis. Integer hendrerit massa quis est molestie consequat. Morbi ultricies,
      leo ut euismod cursus, ligula ante sagittis ex, non gravida dui sapien at nunc. Ut at quam faucibus, posuere tortor et, volutpat ante. Sed accumsan ultrices arcu, id efficitur nunc maximus eget.Quisque vel eros semper, mattis magna sed, dignissim
      leo.
    </p>


    <img src="http://placehold.it/200x200" class="photo left">

    <div style="clear:both"></div>

    <div>
      <img src="http://placehold.it/200x200" class="photo left">
    </div>

    <p class="para left">
      Nunc vel finibus ante. Curabitur finibus, libero et mattis mattis, massa nulla bibendum eros, in maximus lorem elit egestas massa. Duis tellus nibh, aliquet sed vehicula non, elementum at purus. In efficitur venenatis ipsum, eu aliquam ex faucibus a.
      Etiam blandit lobortis purus, et egestas diam lobortis a. Duis in iaculis turpis. Nullam turpis nisl, vulputate id mi eu, blandit auctor mi. Aenean volutpat venenatis est nec tempus. In cursus commodo tortor vitae ultrices. Vestibulum sed fermentum
      enim. Praesent ac risus eu magna finibus ultricies.Curabitur tristique lobortis sem ut pulvinar. Aliquam et felis nec ipsum tincidunt tempor. Mauris ut sollicitudin lorem. Donec faucibus nisl id iaculis congue.
    </p>

    <div style="clear:both"></div>
    <p class="para left">
      Morbi venenatis, tellus eu euismod efficitur, tellus velit posuere ante, eget tempus ex mi vitae sem. Nam et lorem pellentesque enim vehicula tempus. Maecenas et nibh et eros tincidunt pellentesque non ac ante. Maecenas et neque ex. Aenean placerat, odio
      eu faucibus auctor, orci nibh egestas mi, nec imperdiet augue leo quis massa. Vestibulum sed accumsan nulla. Aliquam aliquet sem ante, ut dignissim quam eleifend eu. Nam sit amet dolor iaculis, porttitor arcu in, scelerisque sapien. Nulla auctor
      bibendum tincidunt. Fusce blandit eros at auctor congue. Vestibulum magna justo, convallis ut volutpat vitae, fermentum at nisl.
    </p>


    <img src="http://placehold.it/200x200" class="photo left">

    <div style="clear:both"></div>
  </div>

</body>

We appreciate your thoughts and feedback on this implementation. Thank you!

Answer №2

Here is the solution you've been looking for

    <!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
    <title>Photo Blog</title>
    <link rel="stylesheet" type="text/css" href="photo.css">
</head>
<body>

<div class="header">
            <h1 class="heading">Photo Blog</h1>
            <p class="tagline">A Collection Of Moments</p>
        </div>

<div id="wrapper">
<div>

            <img src="img/DSC01683.JPG" class="photo left">


        <p class="para right">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in pulvinar elit. Sed vitae justo congue neque consequat volutpat. Pellentesque leo ipsum, ultrices et sem ut, dignissim pellentesque libero. Curabitur in mattis nibh. Nulla non sollicitudin elit. Vivamus erat eros, egestas eget quam sit amet, malesuada laoreet sapien. Vestibulum at mattis lectus. Curabitur nunc augue, dictum eu fermentum non, dignissim eget diam.Donec facilisis eros felis, quis tristique libero ultricies tincidunt. Praesent ullamcorper eget dui non hendrerit.
        </p>
</div>
<div>
        <p class="para left">
            Nunc nec mauris a magna egestas vulputate in vel odio. Nunc purus ligula, suscipit et libero non, rutrum accumsan sapien. Mauris tortor massa, aliquam eu viverra id, interdum eu felis. Integer hendrerit massa quis est molestie consequat. Morbi ultricies, leo ut euismod cursus, ligula ante sagittis ex, non gravida dui sapien at nunc. Ut at quam faucibus, posuere tortor et, volutpat ante. Sed accumsan ultrices arcu, id efficitur nunc maximus eget.Quisque vel eros semper, mattis magna sed, dignissim leo.
        </p>


        <img src="img/DSC01716.JPG" class="photo right">
</div>
    <div class="left">
        <img src="img/DSC01780.JPG" class="photo left">


        <p class="para right">
            Nunc vel finibus ante. Curabitur finibus, libero et mattis mattis, massa nulla bibendum eros, in maximus lorem elit egestas massa. Duis tellus nibh, aliquet sed vehicula non, elementum at purus. In efficitur venenatis ipsum, eu aliquam ex faucibus a. Etiam blandit lobortis purus, et egestas diam lobortis a. Duis in iaculis turpis. Nullam turpis nisl, vulputate id mi eu, blandit auctor mi. Aenean volutpat venenatis est nec tempus. In cursus commodo tortor vitae ultrices. Vestibulum sed fermentum enim. Praesent ac risus eu magna finibus ultricies.Curabitur tristique lobortis sem ut pulvinar. Aliquam et felis nec ipsum tincidunt tempor. Mauris ut sollicitudin lorem. Donec faucibus nisl id iaculis congue.
        </p>
</div>
<div>
        <p class="para left">
            Morbi venenatis, tellus eu euismod efficitur, tellus velit posuere ante, eget tempus ex mi vitae sem. Nam et lorem pellentesque enim vehicula tempus. Maecenas et nibh et eros tincidunt pellentesque non ac ante. Maecenas et neque ex. Aenean placerat, odio eu faucibus auctor, orci nibh egestas mi, nec imperdiet augue leo quis massa. Vestibulum sed accumsan nulla. Aliquam aliquet sem ante, ut dignissim quam eleifend eu. Nam sit amet dolor iaculis, porttitor arcu in, scelerisque sapien. Nulla auctor bibendum tincidunt. Fusce blandit eros at auctor congue. Vestibulum magna justo, convallis ut volutpat vitae, fermentum at nisl.
        </p>


        <img src="img/DSC01820.JPG" class="photo right">
</div>
</div>

</body>
</html>

include a css class

.right {
   float:right;
}

The reason images are wrapping around the text is due to using float left on that specific para-image combination.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

javascripthtmlcsscodeigniter

Tips for linking newly generated elements post-page rendering to events using jQuery?

Utilizing Jquery to insert <select> elements into a <div>. These <select> elements should trigger a change() event with a specific class (e.g. <select class="trigger"> -> $(.trigger).change(...)). The issue arises when adding t ...

jqueryhtml

Make sure to clear the localStorage when the tab or browser is closed, but do not

Is there a way to detect when a tab is closed in order to clear the localStorage for data sharing between tabs? The window.onbeforeunload event works, but it has two issues: It triggers on page refreshes, which is not desired. I do not want a confirmation ...

javascripthtmlangularjswindow

Ensure that the HTML input only accepts numbers and email addresses

Is there a way to restrict an HTML input field to only accept numbers and email IDs? <input id="input" type="text" /> ...

javascripthtml

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

javascriptjqueryhtmlcssnodes

Exploring the Power of Angular Framework

Currently, I am in the process of developing a project using Angular 12 where I have an HTML response that needs to be displayed. I aim to bind the innerHtml of a div to the value of a variable, utilizing the syntax {{value}}. ...

htmlangulartypescript

Creating an art piece on canvas using Javascript based on an image selection

Using the webpage below, I am attempting to draw a photo selected with an iPhone on the canvas so that it can be later uploaded to a webpage via ajax. The code includes downsampling, which has been omitted for simplicity. While this code works perfectly i ...

javascriptjqueryhtmlcanvas

The sorting icon cannot be substituted with jQuery, AJAX, or PHP

Currently, I am working on implementing "sort tables" using ajax, jquery, and PHP. The sorting function is functioning correctly; however, I need to show/hide the "sorting images". At the moment, only one-sided (descending) sorting is operational because I ...

javascriptphphtmljqueryajax

Tips for choosing the parents sibling using CSS

How can I change the background color of the .arrow-tip class when hovering over the first <li>? Can you provide me with the correct CSS rule? Here is the HTML code: <nav> <ul> <li>Item 1</li> <li>I ...

htmlcsscss-selectors

Enhancing the functionality of radio buttons through event changes and optimizing related features

I am searching for a more efficient method to reuse functions that serve a similar purpose. For example, I would like to modify various radio buttons that toggle a hide class on different divs. JSFiddle Link How can jQuery be used to create a reusable fu ...

javascriptjqueryhtml

Issue: The icon does not change when toggling between showing and hiding the password input (HTML, CSS, JS)

After following a tutorial on building a basic login form, I decided to enhance it by incorporating a show/hide password feature using JavaScript. Unfortunately, despite the tutorial working flawlessly, I encountered issues when implementing it myself. I a ...

javascripthtmlcss

What causes the off-canvas menu to displace my fixed div when it is opened?

Using the Pushy off-canvas menu from GitHub for my website has been great, but it's causing some trouble with my fixed header. When I scroll down the page, the header sticks perfectly to the top, but once I open the off-canvas menu, the header disappe ...

javascriptjquerycssoff-canvas-menu

Javascript and the Cookie Conundrum

My goal is to use Javascript to create a cookie that stores the value of an input field with the id "username" every time a button is pressed. Then, I want to retrieve and display that cookie value on the website. I attempted to implement this myself to te ...

javascripthtmlcookies

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

javascriptcssreactjsmaterial-ui

What is the proper way to attach an 'onChange' event listener to an input element using React?

When working with React, it's important to note that the onChange event in the code snippet below is considered an on input event handler, rather than an on change event handler: <input onChange={() => ()}></input> However, if your goa ...

javascripthtmlreactjs

Activate Jquery as the user navigates through it with scrolling

Is there a way to activate a JQuery event when the user first scrolls over a particular div? I attempted to utilize waypoint for this purpose, but unfortunately, it did not work as expected. Below is the code I used with no errors: var waypoints = $(&apo ...

javascriptjqueryhtml

Utilizing JQuery Autocomplete to Display Names and Retain IDs with PHP and MySQL

I am facing an issue with the autocomplete feature where the list appears blank (only borders, no content). Here is the code snippet: The Data I receive : <?php require 'cnx/cnx.php'; $stmt = $pdo->prepare('select * from auteurs w ...

javascriptphpjqueryhtmlajax

Css shaky letters transformation

[SOLUTION] To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering: will-change: transform; [ORIGINAL QUESTION] After extensive searching on the internet, I have yet to find a solution to a seemingly simple prob ...

javascriptcsstransformjittertranslate3d

The best way to correctly present an HTML document within a UITextView

I am facing an issue with displaying an HTML document inside a UITextView in my iOS app. I have successfully converted the HTML document to an NSAttributedString using a specific extension. extension String { var htmlToAttributedString: NSAttributedStr ...

htmliosswiftuitextviewnsattributedstring

Tips for aligning 'textarea' and 'a' (button) tags in a single row

<div class="row"> <a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a> </div> <div class="row"> <textarea name="textareaAxs" ></textarea> <a class="btn btn btn- ...

htmlcssbootstrap-4