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

Posted by Rikki Collier
Rikki Collier
2,708 Points

Help - text wraps around floated image when resized

Hi Treehouse,

I have a bit of an issue with the text in one of my containers wrapping around the floated image that also sits in the container when the browser is resized.

Here is what it looks like normally: http://imgur.com/a/3det9

Here is what it looks like when I resize the browser: http://imgur.com/a/8hVIC

I've tried displaying the text as inline-block as I thought that would solve the issue, but this actually just forces the text down below the image at all resolutions instead of only doing so when the browser is resized.

Is there a way for me to make the text act like a block level element but stay in the position it is in now (at the top of the container next to the image)?

2 Answers

David Schriever
David Schriever
1,777 Points
David Schriever
David Schriever
1,777 Points

Hey Ricci! Wouldn't a media query solve that, by making it and inline-block only when it's sized down? http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

What might also work is to ensure you have margins, border, width and padding add up to 100% at the end, then inline-block should actually handle that for all sizes.

Rikki Collier
Rikki Collier
2,708 Points
Rikki Collier
Rikki Collier
2,708 Points

Hi David,

Thanks for the response.

I actually solved this by setting a breakpoint which triggered a 50% right margin on the image - this pushed the text below and created a uniform look whilst maintaining the image size (width: auto max-width 100%).

I think the problems were there because of my dodgy page layout - the image was floated while the caption was sort of placed to run beneath the image, so there were a few concurrent properties that made achieving a uniform look between all my album containers tricky. The margin trick solved that though (as ugly a solution as it may be.)