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

Move the menu position in Bootstrap 4 navbar

Is there a way to display two words side by side in React components?

Can the <container> block be positioned beneath the <header> block?

Issue: The system does not recognize 'cleancss' as an internal or external command

Add the class "form-group-row" to the "form-horizontal" element

Always ensure that the full text is responsively aligned to the right of the image

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Ways to create a sequential appearance of elements through CSS animations

Is there a way to change the button design within the CSS code of Mailchimp's embed feature?

The SVG element's width is set to 100%, but it does not expand

Utilize flexGrow property to make Material UI Grid container expand dynamically

Unable to add padding to <b> tag

What is the best way to align a button within a Jumbotron?

What is the meaning of this CSS acronym?

Diagonal-left ending div in cascading style sheets

What is the process for creating this image using HTML and CSS?

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

Guide on implementing image tag and source in Django template language system

Responses were buried beneath the inquiries on the frequently asked questions page

Even if there is no overflow, the scroll bar will always be visible with the