What's causing the text not to wrap when using float?

I've tried setting float:left for the image and float:right for the text, but the image is still overlapping the text.

What I really want is for the text to wrap around the image - to be on the right side of the image at the beginning and below the image later on.

#intro_page p{
line-height: 27px;
float: right;
}

#intro_main_text{
float: right;
}

.intro_pic1{
float: left;
clear: left;
    position: absolute;
}
<div id="intro_page" class="unseen">
<div id="intro_page_content">
<p id="intro_main_text" > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea ... </p>

<figure class="intro_pic1">
<img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
<figcaption>Sample Image 2015</figcaption>
</figure>
</div>
</div>

htmlcss

Answer №1

To switch the placement of your image and paragraph, simply align the image to the left and update the CSS as follows:

#intro_page p {
  line-height: 27px;
}
.intro_pic1 {
  float: left;
}
<div id="intro_page" class="unseen">
  <div id="intro_page_content">
    <figure class="intro_pic1">
      <img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
      <figcaption>Sample Image 2015</figcaption>
    </figure>
    <p id="intro_main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>


  </div>
</div>

Answer №2

If you rearrange the order of the elements in your HTML code by moving the figure element above the p element, you can easily use CSS to float the figure element and have text automatically wrap around it. Take a look at how this works in action on this fiddle.

Here is the updated HTML/CSS:

HTML

<div id="intro_page" class="unseen">
    <div id="intro_page_content">
        <figure class="intro_pic1">
            <img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
            <figcaption>Sample Image 2015</figcaption>
        </figure>
        <p id="intro_main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

CSS

#intro_page p {
    line-height: 27px;
}

.intro_pic1 {
    float: left;
}

Answer №3

It seems like floats are causing some issues. Check out this jsfiddle for a possible solution: http://jsfiddle.net/8r20z6t1/

#intro_page p{
    line-height: 27px;
}

#intro_main_text{

}

.intro_pic1{
    float: left;
    clear: left;

}

<div id="intro_page" class="unseen">
    <div id="intro_page_content">
                    <figure class="intro_pic1">
        <img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
        <figcaption>Sample Image 2015</figcaption>
        </figure>
        <p id="intro_main_text" > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>


    </div>
</div>

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

Displaying altered textContent

I am working with an SVG stored as a string and making some adjustments to it. The final result is being displayed as text within targetDiv. <html lang="en"> <head> <title>Output Modified</title> </head> <body> ...

javascriptjqueryhtmlsvg

Tips on transferring information from AngularJS to a remote server using ngResource

Looking for guidance on utilizing the ngResource module? To send data to a server. To retrieve data from a server. I am attempting to send data to a Solr server. Utilizing AngularJS API. Using npm package manager to install packages to my application. Th ...

javascripthtmlangularjs

How can I toggle the visibility of a div based on whether a variable is defined or not?

How can I display a specific div on my webpage only when certain variables in PHP pull out a specific result from a database? I attempted to use the code snippet below, but it's not working as expected. Can someone provide guidance on how to achieve ...

javascriptphpjqueryhtml

Streamlined approach to triggering ng-change on a single textbox

Consider this array within an angular controller: somelist = [ { name: 'John', dirty: false }, { name: 'Max', dirty: false }, { name: 'Betty', dirty: false } ]; To iterat ...

javascripthtmlangularjs

Struggling to display blob URL on "pdf-viewer" component with "ng2-pdf-viewer" in Angular version 10

I am facing an issue with an API that returns uploaded files as blobs. When trying to bind the src with a blob URL, nothing is shown. However, if I bind it with a direct URL, the PDF file is displayed successfully. Below is my code snippet. My TypeScript ...

htmlangulartypescriptapipdf

PHP time counting script

Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...

phpjqueryhtml

Utilizing HTML5 canvas to extract pixel data from an image loaded from an external source

When it comes to security reasons, doing it directly may not be feasible. Nevertheless, there are rumors circulating about certain image-hosting platforms that permit the use of their images in a comparable way (could Google Picasa be one?). I might be mis ...

javascripthtmlcanvas

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

javascripthtmlcss

Wrapping is disabled for all elements within the container div that contains three additional div elements

I am trying to prevent one of the three divs inside a fixed top navbar container from sliding underneath another, causing the navbar to become taller. The code below is using Bootstrap and the issue is with the navbar-header div sliding underneath the he ...

csshtmltwitter-bootstrap

Fade in text effect using jQuery on a Mac computer

Trying to create a smooth text fading effect across different browsers using jQuery. In the example below, you may notice that during the last part of the animation when the text fades in, the font weight suddenly increases causing a jerky/clunky appearan ...

javascriptjquerycss

I am looking to pair a unique audio clip with each picture in my collection

I have implemented a random slideshow feature that cycles through numerous images. I am now looking to incorporate a brief audio clip with each image, synchronized with the array I have established for the random pictures. The code snippet below is a simil ...

javascriptarrayshtmlimagehtml5-audio

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

htmlcssbootstrap-4search-box

Instantly reveal menu by pressing button

Is there a way to make my mobile menu open immediately upon touching the button? I have used ontouchstart="" in both buttons to create an overlay on the content when the offcanvas menu is visible. This functions well as soon as the user touches either butt ...

javascripthtmlmobiletouchstart

Creating circular patterns with looping on a canvas

My goal is to draw circles in a loop, but when I execute my code, I am encountering an unexpected result: The intention is to simply draw 3 circles in random positions. Here is my current code: for (var i = 0; i < iloscU; i++) { ctx.strokeStyle = ...

javascripthtml

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image

I'm curious why the button appears grey in IE and turns blue on hover, rather than starting off blue and becoming darker blue when hovered over. I've managed to make it work in other browsers, but I'm struggling with the code for IE. Thank ...

htmlcssinternet-explorer

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

I am looking to design a table that includes questions, checkboxes, and text boxes. All the questions are stored in a database and called through an array. In addition, I want to create disabled textboxes that become enabled when their corresponding checkb ...

javascriptphphtmlarrayscheckbox

Angular service provided by MetronicApp

I've been working on integrating Angular services with the Metronic App. This is how I defined my service: angular.module('MetronicApp').service('shaperService', ['$http', function ($http) { this.shapers = function(param ...

htmlangularjs

The Bootstrap table spills over the edges of the container

I'm currently working on a project where I need to create a table with a grey background, but I am facing an issue where the lines from my table are extending past the div container. I even tried placing it inside a form, but that did not resolve the ...

phphtmlcsstwitter-bootstrap

CSS gallery slideshow with images that smoothly fade-in and fade-out at a specified location

In the image below, at position 4 (marked by yellow circle) from the left where picture 6 is displayed, I want a cross-fade (fade-in/fade-out) gallery of images to take place. Specifically at position 4, I am looking for a cross-fade (fade-in/fade-out) ef ...

htmlcsscss-animationsfadeinfadeout

Adding a command to open a new browser tab using JavaScript code can easily be accomplished by following these steps. By using Terminal, you can quickly and efficiently implement this feature

I'm new to coding and trying to create a terminal simulation. You can check out my code here: https://codepen.io/isdampe/pen/YpgOYr. Command: var coreCmds = { "clear": clear }; Answer (to clear the screen): function clear(argv, argc ...

javascripthtmlcss