What is the best way to make the contents in the left div collide with the right div?

Question

What is the best way to make the contents in the left div collide with the right div?

Is there a way to make the left div's content flow around the right one without overlapping?

.class1 {
  background-color: #678e6f;
  width: 80%;
  float: left;
}

.class2 {
  background-color: #00ff34;
  width: 300px;
  float: right;
}

<div class="class">
  <div class="class1">
    <img/><img/><img/>
  </div>
  <div class="class2">
    <li>text</li>
  </div>
</div>

When the divs collide, I want them to align perfectly on the right side.

I am looking for a solution that will allow all elements to be transferred smoothly like in this example:

Can this be achieved?

html css

Answer 1

Answer №1

Your sample has several issues, but if you aim to have text wrapping around an image (or any div) aligned to the right, it would resemble something like this:

.containerClass {
   background-color: #678e6f;
}

.floatClass {
   background-color: #00ff34;
   width: 300px;
   float: right;
   margin: 10px; /* Don't forget about margins! */
}

Next, in the HTML section:

<div class="containerClass">
  <div class="floatClass">
    <img /> <!-- This is where the image that text will wrap around goes. -->
  </div>
  <p>This is the content that will flow around the floated div.</p>
</div>

It doesn't matter whether the elements are text or images, or a combination of both. The type of content is not important. However, having text wrap around images is not very common!

Answer 2

Your sample has several issues, but if you aim to have text wrapping around an image (or any div) aligned to the right, it would resemble something like this:

.containerClass {
   background-color: #678e6f;
}

.floatClass {
   background-color: #00ff34;
   width: 300px;
   float: right;
   margin: 10px; /* Don't forget about margins! */
}

Next, in the HTML section:

<div class="containerClass">
  <div class="floatClass">
    <img /> <!-- This is where the image that text will wrap around goes. -->
  </div>
  <p>This is the content that will flow around the floated div.</p>
</div>

It doesn't matter whether the elements are text or images, or a combination of both. The type of content is not important. However, having text wrap around images is not very common!

What is the best way to make the contents in the left div collide with the right div?

Answer №1

Similar questions

What is the best approach to creating a website for a client who needs to incorporate their own Youtube videos?

Combine the second and third rows into a unified single row

Is setting the height to 100% a dependable option for container loading during the initial page rendering in CSS?

Discover the secret to showcasing the latest items at the bottom of a scrollable flexbox container (Complete with code example)

Alter the hue on the fly

Transform Asp:CheckBox Appearance with CSS Styling

step-by-step guide on showcasing and concealing textbox borders

Create a visual representation of an item within a framework using an Angular directive

Recording Node pathways that begin with the hash symbol #

Guide to switching content within a DIV when the up and down buttons are pressed using JavaScript and jQuery

Showcasing the values of JavaScript

Populating a drop-down menu using Python requests in a select tag

Using Ajax to update multiple text field rows with unique values

I am creating accordion-style bootstrap tables using data generated from an ng-repeat loop, all without the use of ui.bootstrap or jquery

I'm looking to mirror images within the Bootstrap framework - any suggestions on how to achieve this using jQuery

Finding the Right Spot to Edit HTML Code in Microsoft Dynamics CRM

"Upon refresh, the overflow property of the child element is being applied to the window position

class automatically receives an unwanted display: none attribute

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?

Get access to a PDF file by simply clicking a button that has a href link without any URL or file