HTML Element Unable to Contain Alternating Pictures

I found myself stuck and decided to enlist the help of UI hackers.

My goal is to design a layout with a div, an image on the left (larger than the second pic), followed by text (with p's), and finally a small picture on the right. The text wraps around the image on the left perfectly, but the issue is that the image on the right is not wrapped correctly.

Below is the code I am currently working on:

<html>
<head>
</head>
<body>
<div style='overflow:hidden;width:600px;border:1px solid black;padding:5px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;'>
    <img src='../images/monkey.jpg' style='margin-right:7px;border:1px solid #C0C0C0;padding:5px;float:left;height:100px;width:125px;'/>
    <div style='word-wrap:break-word;'>
         this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e <img src='../images/monkey.jpg' style='margin-right:7px;border:1px solid #C0C0C0;padding:5px;float:right;height:50px;width:60px;'/>
    </div>
</div>
</body>
</html>
htmlcssuser-interface

Answer №1

Everything seems to be working perfectly, just make sure your image is positioned higher in the text. I took out the div wrapper and moved the image up, and now it's functioning as expected:

Check out the jsFiddle demo here

HTML:

<html>
<head></head>
<body>
    <div style='overflow:hidden;width:600px;border:1px solid black;padding:5px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;word-wrap:break-word;text-align:justify'>
        <img src='../images/monkey.jpg' style='margin:7px;border:1px solid #C0C0C0;padding:5px;float:left;height:100px;width:125px;'/>
        this is the second paragraph that has not even made it to the actual, this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. 
        <img src='../images/monkey.jpg' style='border:1px solid #C0C0C0;padding:5px;float:right;height:50px;width:60px;margin:7px;'/> 
        Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e.
    </div>
</body>
</html>

Output:

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

The Ajax post is only activated on one occasion

Hello there, I am encountering a problem with an ajax function. My goal is to post data to a database and then update a table that displays the database information. Strangely, the process works fine the first time - data is posted and the table is refresh ...

javascriptphphtmljqueryajax

Tips for aligning spin.js spinner in the center of a bootstrap 3 modal?

I'm attempting to showcase and center the spin.js spinner within a Bootstrap 3 modal. Despite successful implementation in IE and FF using the code below, I am encountering issues in Chrome, Safari Desktop, Chrome IOS, Safari IOS. The problem appears ...

htmltwitter-bootstrapmodal-dialogspinnertwitter-bootstrap-3

The drop down menu is refusing to close with a second click or touch

I'm currently using a bootstrap template that I found online, but I've encountered an issue where the drop-down menu for "Shop" doesn't close on the second click when viewing it on a smaller screen size. Can anyone provide guidance on how to ...

htmljquerycssbootstrap-4

What causes the disparity in functionality between CSS's Left 75% and Right 25% properties?

Here is my CSS code snippet: .bloodparam > .highvalue { bottom: 12px; right: 25%; } and .bloodparam > .highvalue { bottom: 12px; left: 75%; } I expected the element to be in the same position with both lines of code, but I'm noticing differe ...

csscss-positionabsolute

"Email signature design with sleek black borders incorporated for a professional touch in responses

At my workplace, I use an HTML file as my email signature footer with IBM Notes. Everything looks great when I create a new email - the logo is positioned correctly, text is styled how I want it, and the overall layout is fine. However, things start to lo ...

htmlcssemailhtml-email

Safari now fully embraces Flexbox technology

My flexbox code works well in Chrome and Firefox, but unfortunately it's not performing well in Safari. Despite trying various prefixes, I couldn't achieve the same simple order. How can I modify or add to my code so that it functions normally in ...

htmlcssflexbox

How about a group-input containing a element added in the center?

Looking to insert a prepend element between two input elements without relying on extra CSS tricks. Is it possible to achieve this using just Bootstrap and without any additional CSS? <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...

csstwitter-bootstrapbootstrap-4

Tips for locating and substituting a string in Javascript

Is there a way to locate a particular word within a string and substitute it using JavaScript? For instance Here is a lengthy sentence I want to locate the word "sentence" and modify it to "phrase", resulting in: Here is a lengthy phrase ...

javascripthtmlstring

Cordova - Fixed elements flicker/blink when scrolling

I have exhausted all possible solutions, ranging from -webkit-transform: translate3d(0,0,0); to -webkit-backface-visibility:hidden but none of them seem to resolve the issue of an element flickering/blinking/disappearing when scrolling on iOS with - ...

javascripthtmlcordovaphonegap

Implementing Adaptive Images in Bootstrap 5 for a Specified Design

I am currently working on a website layout that involves displaying one image per section. My goal is to have the images positioned on either side of the text when viewed on a larger screen, as shown in the example below: https://i.sstatic.net/bms6S.png ...

javascripthtmlreactjsbootstrap-5responsive-images

using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS: .item{ border-bottom: 1px dotted #ccc; text-indent: 50px; height: 81%; padding: 2px; text-transf ...

csssass

Tips for resolving an issue with an overflowing Uber React-Vis multicolor bar chart

I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it. You can view the ...

javascriptcssreactjsreact-vis

Error with Bootstrap Layout caused by the StringBuilder

After diving into Bootstrap, I encountered an issue with the layout generated by a VB.NET page using StringBuilder. The result was a disorganized mess: Upon further inspection, it became evident that the problem extended to other sections of the page as w ...

htmlcssvb.nettwitter-bootstrap

How can the text content within a tag be divided into multiple tags based on a specific maximum height for each tag?

If you have a block of HTML and you want to ensure that no single element exceeds a certain height, how would you go about splitting the element into multiple smaller elements? Keep in mind that the window width may affect this solution, so let's assu ...

javascriptjqueryhtmlcss

What is the best way to resize an image to fit in a div element if the image is larger than the div?

I have an image tag nested within a div element. <div id = "myDiv"> <img alt = "myImage" src = "some_source"/> </div> The image is larger than the div, causing it to extend beyond the boundaries of the div. Initially, I considered usin ...

html

Update the image links to automatically refresh every half a second based on the values inputted in the text bars

Is there a better and simpler way to define AAAAAAAAAA, BBBBBBBBBB, and CCCCCCCCCC using the links provided in the text bars named chart1, chart2, and chart3? This learning project is being done through Notepad++ for personal use only, with no need to sa ...

javascripthtmlimagesrc

Ways to verify the input text for content without activating the submit action using only JavaScript

I'm working on creating a unique input effect where the label moves up 100px when the input is focused, and then remains at the top when the user enters a value. If the input is empty and the user clicks outside, the label will return to its original ...

htmlcssbootstrap-4

Concentrate on a specific component within an overlay using jQuery

How can I focus on a specific area within an overlay when adding an item to the cart? I want to make the rest of the overlay darker and the targeted area more visible. See a quick mockup here: https://i.sstatic.net/UpJuc.png Here's the HTML code: & ...

javascriptjqueryhtmlcss

Combining CSS with PHP includes for dynamic navigation menus

I am currently designing a CSS navigation bar located within the 'includes' folder. My goal is to make each link in the navigation bar active when clicked. I have linked to this folder using "include('includes/header.php');" Here is my ...

phpcss

Implementing a function as the `data-*` attribute for an element in Angular 6

I have a question about my component.ts file: import { Component, OnInit, AfterViewInit, ElementRef, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; import { environment } from '../../../enviro ...

javascriptangularhtmlangular6