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

HTML How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Posted by Luke Ayres
Luke Ayres
2,971 Points

Floating elements.

So without the float property, even when there is room for elements to sit within the same horizontal space they won't? Is this true of all elements?

3 Answers

Mike Schaming
Mike Schaming
13,925 Points
Mike Schaming
Mike Schaming
13,925 Points

Hi Luke- When we talk about elements being block or inline, we are referring to how they appear in the normal document flow (how the browser displays them in the order they appear in your html). When we float an element, we are taking it out of the normal document flow. In this way, the other elements wrap around the floated element.

You can use either Display (inline, block, or inline-block) or Float to layout a page. Floats behave like inline-block elements, they can appear side by side but take up space (width, height, margin, padding). The difference being when you float something, you take it out of the document flow.

If you have the time I recommend these videos- they really drove these concepts home for me. Good luck!

https://teamtreehouse.com/library/css-layout-basics/controlling-layout-with-css-display-modes/positioning-elements-sidebyside-with-inline-display

https://teamtreehouse.com/library/css-layout-basics/controlling-layout-with-css-display-modes/using-inlineblock-to-set-width-height-top-and-bottom-margin-and-padding

https://teamtreehouse.com/library/css-layout-basics/page-layout-with-the-float-property/how-floats-work

Luke Ayres
Luke Ayres
2,971 Points

I'm starting to get this- as soon as I'm done with all the CSS basics videos I'll defintely check out these videos :)

Mike Schaming
Mike Schaming
13,925 Points
Mike Schaming
Mike Schaming
13,925 Points

Hi Luke- it depends on whether they are block or inline elements. Inline elements will appear on the same line together, while block level elements take up the whole line by themselves. You can use the Display property to change an element's default if you wish.

Luke Ayres
Luke Ayres
2,971 Points
Luke Ayres
Luke Ayres
2,971 Points

Thanks Mike, so float makes an object inline as well? Or as these always (display and float) seperate properties? Only I can't see how the two would work together.