Tips for achieving vertically centered text wrapping around a floating image

Question

Tips for achieving vertically centered text wrapping around a floating image

Describing it in words is proving to be difficult, so let me just illustrate it for you.

In the following images, the horizontal lines represent the "text", the small box symbolizes the image, and the larger box encompasses the entire webpage. My goal is to make the text behave as shown in the drawings, but I'm struggling to achieve that.

https://i.sstatic.net/jtryI.png

https://i.sstatic.net/Zo5h5.png

I've managed to wrap the text around the image using the float property, and I can vertically center the text using flexbox, grid, or even table. However, I'm facing a challenge when trying to do both simultaneously. Whenever I attempt to vertically center the text using any of these techniques, it seems to run into a clearing bug and treats height:100% as if the image doesn't exist.

https://i.sstatic.net/UmLGq.png

https://i.sstatic.net/yCjSp.png

html css

Answer 1

Answer №1

To accomplish this, you can utilize the float and flex properties. If there is a small amount of text dynamically present, add the .box-flex class to the .box. However, if there is a larger amount of text, there is no need to include the .box-flex class.
In the case of using the flex display, I am employing the order property to shift the image div from the left to the right side.

The code snippet below should provide significant assistance:

*{box-sizing: border-box;}
.box{
    font-family: Arial;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    max-width: 480px;
    min-height: 100px;
    background-color: rgb(148, 206, 203);
    padding: 15px;
    margin: 15px auto 15px auto;
    color: #333;
    border-radius: 8px;
}
.img{
    width: 100px;
    height: 100px;
    min-width: 100px;
    max-width: 100px;
    max-height: 100px;
    background: coral;
    margin-left: 12px;
    float: right;
    border-radius: 4px;
}
.txt{
    position: relative;
    min-height: inherit;
    padding: 0;
    text-align: justify;
}
.box-flex{
    display: flex;
    justify-content: space-between;
}
.box-flex .img{
    order: 1;
}
.box-flex .txt{
    padding: 0;
    align-self: center;
    min-height: auto;
}

<div class="box box-flex">
    <div class="img"></div>
    <div class="txt">
        If there is a small amount of text (apply .box-flex)
    </div>
</div>
<div class="box">
    <div class="img"></div>
    <div class="txt">
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Unde adipisci soluta beatae minima, dolores atque voluptas, explicabo mollitia, sunt alias nihil doloribus veritatis perferendis quibusdam error exercitationem quia consequuntur eos dignissimos sed veniam? Rerum saepe qui sed corporis voluptatibus soluta quo eaque. Quidem recusandae dolorum nesciunt Rerum saepe qui sed.
    </div>
</div>

Answer 2

To accomplish this, you can utilize the float and flex properties. If there is a small amount of text dynamically present, add the .box-flex class to the .box. However, if there is a larger amount of text, there is no need to include the .box-flex class.
In the case of using the flex display, I am employing the order property to shift the image div from the left to the right side.

The code snippet below should provide significant assistance:

*{box-sizing: border-box;}
.box{
    font-family: Arial;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    max-width: 480px;
    min-height: 100px;
    background-color: rgb(148, 206, 203);
    padding: 15px;
    margin: 15px auto 15px auto;
    color: #333;
    border-radius: 8px;
}
.img{
    width: 100px;
    height: 100px;
    min-width: 100px;
    max-width: 100px;
    max-height: 100px;
    background: coral;
    margin-left: 12px;
    float: right;
    border-radius: 4px;
}
.txt{
    position: relative;
    min-height: inherit;
    padding: 0;
    text-align: justify;
}
.box-flex{
    display: flex;
    justify-content: space-between;
}
.box-flex .img{
    order: 1;
}
.box-flex .txt{
    padding: 0;
    align-self: center;
    min-height: auto;
}

<div class="box box-flex">
    <div class="img"></div>
    <div class="txt">
        If there is a small amount of text (apply .box-flex)
    </div>
</div>
<div class="box">
    <div class="img"></div>
    <div class="txt">
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Unde adipisci soluta beatae minima, dolores atque voluptas, explicabo mollitia, sunt alias nihil doloribus veritatis perferendis quibusdam error exercitationem quia consequuntur eos dignissimos sed veniam? Rerum saepe qui sed corporis voluptatibus soluta quo eaque. Quidem recusandae dolorum nesciunt Rerum saepe qui sed.
    </div>
</div>

Answer 3

Answer №2

CSS Exclusions could potentially provide a solution in this scenario: it offers the ability to wrap text around any element, even those that are absolutely positioned. Unfortunately, this feature is still in the working draft stage and is not yet supported by any browsers.

Here's an example showcasing how CSS Exclusions might be beneficial for your situation. While it uses absolute positioning instead of floating, it doesn't achieve the desired text wrapping effect. The "wrap-flow" rule doesn't seem to work as expected.

.d1 {
    position: relative;
    border: 2px solid cyan;
    min-height:200px;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1em;
}
.excl {
    position: absolute;
    top: 0;
    right: 0;
    width:100px;
    height:200px;
    background-color: lime;
    wrap-flow: both;
}

<div class="d1">
    <div class="excl"></div>
    <div class="txt">
        <p>
            Lorem ipsum 
        </p>
        <p>
            Nunc eu 
        </p>
    </div>
</div>
<div class="d1">
    <div class="excl"></div>
    <div class="txt">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio massa, tempor auctor posuere et, consequat non velit. Suspendisse potenti. Proin hendrerit eu neque id varius. Morbi consequat dui neque, non fringilla dolor pretium vitae. Pellentesque congue nec justo vel mattis. Fusce lobortis turpis a urna elementum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rhoncus sagittis lacus at dignissim.
        </p>
        <p>
            Nunc eu rhoncus massa. Nam pretium pellentesque faucibus. Mauris fringilla erat et nunc feugiat hendrerit. Nullam bibendum faucibus quam ut...
        </p>
       
       (...) Content continues...

        </p>
    </div>
</div>

In the meantime, one suggestion would be to utilize flexbox when dealing with smaller amounts of text near images, and resort to floating elements when longer blocks of text are present. You may need to compromise on the layout slightly or consider alternative approaches until CSS Exclusions become more widely supported.

Answer 4

CSS Exclusions could potentially provide a solution in this scenario: it offers the ability to wrap text around any element, even those that are absolutely positioned. Unfortunately, this feature is still in the working draft stage and is not yet supported by any browsers.

Here's an example showcasing how CSS Exclusions might be beneficial for your situation. While it uses absolute positioning instead of floating, it doesn't achieve the desired text wrapping effect. The "wrap-flow" rule doesn't seem to work as expected.

.d1 {
    position: relative;
    border: 2px solid cyan;
    min-height:200px;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1em;
}
.excl {
    position: absolute;
    top: 0;
    right: 0;
    width:100px;
    height:200px;
    background-color: lime;
    wrap-flow: both;
}

<div class="d1">
    <div class="excl"></div>
    <div class="txt">
        <p>
            Lorem ipsum 
        </p>
        <p>
            Nunc eu 
        </p>
    </div>
</div>
<div class="d1">
    <div class="excl"></div>
    <div class="txt">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio massa, tempor auctor posuere et, consequat non velit. Suspendisse potenti. Proin hendrerit eu neque id varius. Morbi consequat dui neque, non fringilla dolor pretium vitae. Pellentesque congue nec justo vel mattis. Fusce lobortis turpis a urna elementum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rhoncus sagittis lacus at dignissim.
        </p>
        <p>
            Nunc eu rhoncus massa. Nam pretium pellentesque faucibus. Mauris fringilla erat et nunc feugiat hendrerit. Nullam bibendum faucibus quam ut...
        </p>
       
       (...) Content continues...

        </p>
    </div>
</div>

In the meantime, one suggestion would be to utilize flexbox when dealing with smaller amounts of text near images, and resort to floating elements when longer blocks of text are present. You may need to compromise on the layout slightly or consider alternative approaches until CSS Exclusions become more widely supported.

Answer 5

Answer №3

To center the text vertically within a div, you can utilize the following CSS properties: position: relative (for the text) top: 50% transform: translateY(-50%)

Alternatively, you could also use the vertical-align property for both image and text: vertical-align: middle

If this solution does not fully address your issue or if something seems to be missing, please do not hesitate to reach out. I am here to help resolve any further concerns.

Answer 6

To center the text vertically within a div, you can utilize the following CSS properties: position: relative (for the text) top: 50% transform: translateY(-50%)

Alternatively, you could also use the vertical-align property for both image and text: vertical-align: middle

If this solution does not fully address your issue or if something seems to be missing, please do not hesitate to reach out. I am here to help resolve any further concerns.

Tips for achieving vertically centered text wrapping around a floating image

Answer №1

Answer №2

Answer №3

Similar questions

Configuring ng-options with personalized indices

Switch out either even or odd divs within a container

Use Angular and JavaScript to fetch HTML from a mySQL database and dynamically render it on a webpage

Angular 13: Problems arise with custom theme in Angular Material version 13

Creating a Smooth Curve with CSS

Trouble arises when trying to define the style for an element generated through the Document

Align Text with Icon Using FontAwesome

Unable to load circles on page refresh with amCharts Maps

Tips on how to update the styling of an active link

Creating a responsive design for a centered image with absolute positioning

Sending numerous HTML forms using a sole submit button through AJAX

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

What techniques can I implement using JavaScript or CSS to create a slightly transparent effect on my text?

Two media queries are combining the same declaration, with one targeting iPads and the other targeting desktop devices

How can I capture a screenshot of the div displaying pictures uploaded by the user on the frontend?

Is it possible to embed HTML code within JavaScript strings?

variance in efficiency when retrieving a DOM element

Material UI Paper component does not extend to full viewport height

Having trouble with SCSS in a jsfiddle? It could be due to a pesky cross-browser bug

What is the best way to increase the spacing between buttons in a Bootstrap navigation bar?