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 dariorancatore
dariorancatore
6,845 Points

Float and Clear

Hello, I do not understand the clear property: If I have a div with inside an image, a title and paragraph, what i need to do to have the image on the left and the title and paragraph on the right so that the content of paragraph don't go under the image on the left? Thanks in advance.

Robert Komaromi
Robert Komaromi
11,927 Points

Float the image to the left, float everything else to the right. For this simple situation you don't even need to use clear.

2 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Dario,

This CSS Tricks article should help to clear things up (no pun intended :D ); the Clearing the Float section in particular.

Hope that helps.

-Rich

dariorancatore
dariorancatore
6,845 Points

Hi Rich, is it possible to obtain the same result as here by using the clear function? http://codepen.io/anon/pen/RNRdXw

Rich Bagley
Rich Bagley
25,869 Points

Hi Dario,

You would need to apply a float: left to the image div, a float: right to the text div, and then apply a clear: both to any additional tag underneath both the image and text divs.

Hope I've understood correctly and that's what you need.

-Rich

dariorancatore
dariorancatore
6,845 Points

It doesn't work Rich: Paragraph goes down to the image, while the title stays in the right. What i want to do is to use the clear function (if it's possible) to leave the image in the left and title, paragraph content to the right. :(

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

I misunderstood what you were asking I think, but you're probably trying to do something like this?

http://codepen.io/anon/pen/dPXrBE

Or are you trying to have the text more like this?

http://codepen.io/anon/pen/RNRdXw

dariorancatore
dariorancatore
6,845 Points

Hi Imuya, sorry but this is not i was looking for. In fact I want to understand if it's possible to use the clear function to divide image and text as 2 different columns.

dariorancatore
dariorancatore
6,845 Points

This is what I want to do, but using the clear function. Is it possible?

bleedcmyk
bleedcmyk
5,945 Points

Not really. You are much better off just creating two div's that are floating.