Home/ Questions/Q 7802363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T01:14:29+00:00

Couldn’t solve it by myself so I’ve decided to use the help of the

  • 0

Couldn’t solve it by myself so I’ve decided to use the help of the UI hackers.

I’m trying to do a simple design by creating a div, inserting an image (which will stay in left, larger than the second pic), then a text (basically including text with p’s), then a small picture on right. Text wraps image on left just fine but the problem is that the image on right is not wrapped by the picture.

Here is the code I’m 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It actually is working fine, you just need to put your image higher in the text. I removed the div wrapper and placed the image higher and it works:

    jsFiddle demo

    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:

    jsFiddle demo screenshot

    • 0