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

Magdalena Misiuna
Magdalena Misiuna
14,873 Points
Posted by Magdalena Misiuna
Magdalena Misiuna
14,873 Points

How to make elements before a floating element flow around it.

I need <figure> image to float to the right of <p> copy that is before the image in the html. Is there a css or any other trick to it? I can not move <figure> above the <p> for the correct order of elements to comply with accessibility.

here is simple html: <div> <p>copy here</p> <figure><img/> <figcaption>copy here</figcaption> </figure> </div>

2 Answers

Reggie Williams
STAFF
Reggie Williams
Treehouse Teacher
Reggie Williams
Reggie Williams
Treehouse Teacher

Hey Magdalena Misiuna have you tried adjusting the display values of the items you wish to move? If there is a workspace you're using it could be helpful to share a snapshot so myself or others could run the code. With what you've pasted I was able to move the elements when I made them inline/inline-block

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,662 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,662 Points

Hi Magdalena,

I could be a bit confused about what it is you're attempting to do. But if you want just your image to float to the right, you'll do something like img {float: right} in your linked stylesheet. If you want the entire figure to float to the right, you'd do something like figure {float: right}. And by default your paragraph is a block-level element so it spans the width of the screen, so if you don't want it to span the width of the screen (so that it can be to the side of the floated image/figure), you'll have to change its display to something like p {display: inline} or p {display: inline-block}.

I hope that answers your question, if not, elaborate on what exactly your code is doing that you're not intending (and provide a link to your css code as well).