Wrap text around an image within a child element of a flexbox?

Tell us what’s happening:
Hi, I have worked out how to center my image horizontally in my flexbox child, and I want to wrap the text around the child. It appears that vertically centering the image has created another column for the text. I have done my due diligence googling and can’t find a fix. the only thing I came up with was to put a table in the child and format the text around the image using a 1 2 1 column table in the child but that isn’t good coding :frowning:

Your code so far
<!doctype html>

<meta charset="utf-8">


<meta name="viewport" content="width=device-width, initial-scale=1">


body:before {


display: block;




top:0; left: 0; right: 0;

opacity: .4;

min-height: 100%;


.hbground {

        border-radius: 8px;    

        background-image: #32336A; 

        background-image: -webkit-radial-gradient(bottom right, #32336A, #B5D4E6);

        background-image: -moz-radial-gradient(bottom right, #32336A, #B5D4E6);

        background-image: radial-gradient(to top left, #32336A, #B5D4E6);

        width: 100%;

        height: 140px;

        padding-top: 5px;        

        background-position: right;

        background-repeat: no-repeat, no-repeat;

        margin-right: auto;

        margin-left: auto;

        position: relative;





        font-size: 42px;

        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

        font-weight: 700;

        font-style: italic;

        color:rgb(70, 65, 65);

        text-align: center;



    h2 {

        font-size: 24px;

        font-family: Arial, Helvetica, sans-serif;

        display: inline-block;


    p {

        font-size: 18px;


        color:rgb(0, 0, 0);

        margin-left: 2px;

        margin-right: 2px;

        font-weight: 200;



        text-align: center;





        background-color: rgba(100, 100, 100, 0.336);

        font-size: 20px;

        border-radius: 10px;


        list-style-type: none;

        display: inline-block;

        padding: 5px 15px 5px 15px;

        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

        margin-left: 2px;

        position: sticky;



    a {

        display: inline;

        padding: 8px;


    .fixfimg {

        float: right;

        margin-top: -100px;


    input {

        width: 220px;

        padding: 12px 20px;

        margin: 2px 0;

        box-sizing: border-box;

        border: 3px solid #555;

        border-radius: 4px;



    input[type=submit] {

        background-color: #555;

        border: 3px;

        color: #fff;

        padding: 8px 14px;

        text-decoration-style: wavy;



        margin-left: 4px;


    .flex-container {

        flex-direction: row; 

        width: 90%;

        display: flex;


        column-gap: 10px;


    .item {

        border: 2px solid;

        border-radius: 6px;

        width: 33%;

        margin: auto;

        height: 300px;



.box {


align-items: center;

justify-content: center;

text-align: left;

flex-wrap: nowrap;


<header id="header">

    <div class="hbground">


        <nav id="nav-bar">

            <ul style="position: fixed">

                <li class="nav-link"><a href="#home">Home</a></li>

                <li class="nav-link"><a href="#news">News</a></li>

                <li class="nav-link"><a href="#contact">Contact</a></li>




    <div><h1>Fix Stuff!</h1><br>

        <img class="fixfimg" src="https://i.ibb.co/Z8hb930/fixfaqs1.gif" id="header-img"</img>

        <p style="margin-top: -30px;" class="centertext">Posted by DB </p>



<form class="centertext" action="https://www.freecodecamp.com/email-submit" id="form">

    <label "email" id="email"><h2>Enter your email:</h2></label>

    <input type="email" id="email" name="email" placeholder="Enter a valid email address" required><input type="submit" id="submit"><br>


<div class="flex-container">

    <div class="item"><img src="tool1.png" style="float:right" </img>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie mi in ipsum sollicitudin, ac scelerisque elit bibendum. Nullam porttitor rutrum felis nec varius.</p></div>

    <div  style="float:left" class="item box"><img src="tools.png"</img>

        <p>Morbi varius, sapien id tempus porttitor, leo libero sagittis arcu, id porta urna leo in purus. Phasellus augue metus, iaculis at interdum a, accumsan sit amet arcu. Nunc cursus, purus non vehicula iaculis, ligula tortor porttitor magna, in mattis urna lectus sit amet elit. Quisque posuere lacinia sapien, eget aliquet quam molestie vitae.</p></div>

    <div class="item"><img src="tool2.png"</img></div>


<iframe style="float:right"  width="500" height="225" src="https://www.youtube.com/embed/665o5OwV_KU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36 Edg/94.0.992.31

Challenge: Build a Product Landing Page

Link to the challenge:

Have you tried overflow-wrap: break-word;? You can see it’s adjustments in this example here:

There are other options as well:

  • word-wrap: The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
  • overflow-wrap: word-wrap property has been renamed overflow-wrap in the current draft of the CSS3 Text specification
  • word-break: The word-break CSS property is used to specify how (or if) to break lines within words

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.