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

Susitha Herath Mudiyanselage
Susitha Herath Mudiyanselage
4,957 Points
Posted by Susitha Herath Mudiyanselage
Susitha Herath Mudiyanselage
4,957 Points

CSS Float

<style> ul{ float: left; clear: right; } </style>

<body>

    <ul>
        <li> <a href="#">link1</a></li>
        <li> <a href="#">link2</a></li>
        <li> <a href="#">link3</a></li>
    </ul> 

    <div>

        <p>
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor "
        </p></div>
</body>

Question. The div is in the right side of <ul> after setting <ul> float left. then why ul { clear : right } doesn't clear whats on its right side. Similarly if I set div { clear : left } it clears whats on its left side. Its confusing. Can some one please help.

2 Answers

Ana Gledovic
Ana Gledovic
7,465 Points
Ana Gledovic
Ana Gledovic
7,465 Points

Hi,

The thing is that, when you use float property, you have to use the same value if you want to clear floating the next element. So, you do not clear on left or right side, you clear the value. Div is on the right side of viewport, but that it because it sticked to ul. If you use float: left; you use clear: left; to stop floating on the left side. That is the logic.

Best, Ana

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Susitha,

The clear property applies to previously floated elements. So when you use clear: right on the <ul> that means that it must drop below all previous elements that have been floated right. So if you had any elements higher up that were floated right then the <ul> would drop down below them.

div { clear: left; } is what is needed if you want the div to drop below the ul. Here you're saying, the div must drop below any previous elements that have been floated left. Since the <ul> is a previous element and it has been floated left the div must drop below it.