CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Two Column Layout with Flexbox

Nikos Papapetrou
Nikos Papapetrou
2,148 Points

How can I achieve text to float next and under an image? Is it possible inside the flexbox?

 <main class="main-content">
        <div class="container">
            <div class="row">
                <div class="primary col">
                    <h2>First Paragraph</h2>
                    <img class="sunset" src="sunset.jpg" alt="tree">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim tortor, pharetra sit amet sagittis ut, tempus mollis mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at enim hendrerit, facilisis neque et, venenatis enim. Nam condimentum, urna ac varius porta, tortor justo facilisis tortor, eu semper risus diam sit amet est. Mauris aliquet arcu vitae augue bibendum, in pulvinar nunc tempor. Suspendisse sed eros non libero eleifend dapibus ac sed risus. Integer vestibulum justo ornare mattis faucibus. Proin vehicula laoreet nunc, eget facilisis massa condimentum et. Aenean vulputate, augue vestibulum luctus commodo, sapien orci vehicula eros, eu posuere metus mauris ut elit.</p>
                </div>

                <div class="secondary col">
                    <h2>Second paragraph</h2>
                    <p>Το Lorem Ipsum είναι απλά ένα κείμενο χωρίς νόημα για τους επαγγελματίες της τυπογραφίας και στοιχειοθεσίας. Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και ανακάτεψε τις λέξεις για να δημιουργήσει ένα δείγμα βιβλίου. Όχι μόνο επιβίωσε πέντε αιώνες, αλλά κυριάρχησε στην ηλεκτρονική στοιχειοθεσία, παραμένοντας με κάθε τρόπο αναλλοίωτο. Έγινε δημοφιλές τη δεκαετία του '60 με την έκδοση των δειγμάτων της Letraset όπου περιελάμβαναν αποσπάσματα του Lorem Ipsum, και πιο πρόσφατα με το λογισμικό ηλεκτρονικής σελιδοποίησης όπως το Aldus PageMaker που περιείχαν εκδοχές του Lorem Ipsum.</p>
                </div>
            </div>
        </div> 

2 Answers

Jamie Reardon
Jamie Reardon
Front End Web Development Techdegree Student 12,522 Points

It is possible, I have created a demonstration for you with your html here

When you make an element float, you need to define an explicit width, then use margins to add that separation from the text you want flowing around it.

Nikos Papapetrou
Nikos Papapetrou
2,148 Points

Thank you very much! That was exactly in my mind. I will practice it.

Steven Parker
Steven Parker
176,604 Points

To demonstrate your issue, in addition to the HTML you'd need to share the CSS and the images. The easiest way to share everything at once is to make a snapshot of your workspace and post the link to it here.

But it would be unusual to use float and flexbox at the same time. Both are layout techniques, and flexbox generally gives you more control. And they can be used together, but it could make the layout more complicated than it needs to be.