Surround the image with a margin by wrapping text around it

Question

Surround the image with a margin by wrapping text around it

Is it possible to display text in a div with a border and margin around an image using float: right?
I have managed to get the text to wrap correctly around the image, but the border is positioned behind the image.

UPDATE

Here is a snapshot of how I was able to style it:

As you can see, the border ends up at the back of the image instead of wrapping around it as intended.

The code used for this layout is:

<img src='images/mangos.jpeg' width='500px' style='float: right; border: 2px solid $theme; padding: 5px; margin: 0 5px 5px 5px;'>
<div style='font-size: 19px; white-space: pre-wrap; border: 2px solid #F6B616; padding: 5px; margin: 5px;'>
Text Here
</div>

UPDATE 2

I apologize for the lack of clarity in my question. What I am looking to achieve is a slight space between the text and the image border. The goal is to have the text and its border wrap neatly around the image and its own border. Is there a way to accomplish this?

css

Answer 1

Answer №1

What you are observing is completely normal. If your text were to extend past the image, a proper wrap would have the text continue below the image, rather than just in a single column to the left of it. This is the main purpose of using floats (although they can be misused in various ways). Here is an illustration:

      +------+---+            +------+---+
      |text  |img|            |text  |img|
THIS: |text  +---+  NOT THIS: |text  +---+
      |text text |            |text  |
      +----------+            +------+

Your issue can be easily resolved, especially if your background is a solid color. You can simply mask the border of the text that appears behind the image. For example:

<img src='path/to/image'>
<p>Lorem ipsum...</p>


img {
    float: right;
    box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px #F6B616;
    margin: 7px 5px 5px 13px;
    width: 250px;
}
p {
    font-size: 19px;
    white-space: pre-wrap;
    border: 2px solid #F6B616;
    padding: 5px;
    margin: 5px;
}

By adding a double box shadow to the image, as shown in this example, you create the illusion of a border with a 5px margin. The white from this shadow will cover the underlying border of the text, achieving the desired effect.

While there are other techniques, such as utilizing pseudo elements (especially useful for more complex backgrounds), personally I find this approach to be the simplest for your situation.

Answer 2

What you are observing is completely normal. If your text were to extend past the image, a proper wrap would have the text continue below the image, rather than just in a single column to the left of it. This is the main purpose of using floats (although they can be misused in various ways). Here is an illustration:

      +------+---+            +------+---+
      |text  |img|            |text  |img|
THIS: |text  +---+  NOT THIS: |text  +---+
      |text text |            |text  |
      +----------+            +------+

Your issue can be easily resolved, especially if your background is a solid color. You can simply mask the border of the text that appears behind the image. For example:

<img src='path/to/image'>
<p>Lorem ipsum...</p>


img {
    float: right;
    box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px #F6B616;
    margin: 7px 5px 5px 13px;
    width: 250px;
}
p {
    font-size: 19px;
    white-space: pre-wrap;
    border: 2px solid #F6B616;
    padding: 5px;
    margin: 5px;
}

By adding a double box shadow to the image, as shown in this example, you create the illusion of a border with a 5px margin. The white from this shadow will cover the underlying border of the text, achieving the desired effect.

While there are other techniques, such as utilizing pseudo elements (especially useful for more complex backgrounds), personally I find this approach to be the simplest for your situation.

Surround the image with a margin by wrapping text around it

Answer №1

Similar questions

Struggling with Responsive Design Challenges with Grid Material UI?

Place a label within a container and surround it with a single border. Inside the container, create an unordered list

Efficiently Minimize Bootstrap Components Upon Clicking the Link

jQuery "slide" animation without using <br>

Achieving the perfect overlay and centered image effect using CSS

Struggling with Implementing Modals in Bootstrap 3.3.7

The transparent DIV/waiting message may not be displayed in IE10

Deploying static files with Django in a production environment

What is the best way to create some distance between a div element and the bottom of the body?

Combining both inline and block positioning for div content

Arrange Drifting Components in a Fluid Layout Grid

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

Prevent fixed element from scrolling beyond a specific point

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

Two divs positioned to the right on top of each other

What is the best way to format text within the _e() function in WordPress?

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

Blazor Razor Component Library (RCL) Lacks CSS IntelliSense

Change the size of a particular div upon hovering over another element

What is the best technique for vertically aligning text within two divs placed side by side?