Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Nikos Papapetrou
Nikos Papapetrou
6,305 Points
Posted by Nikos Papapetrou
Nikos Papapetrou
6,305 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

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
6,305 Points
Nikos Papapetrou
Nikos Papapetrou
6,305 Points

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

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 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.