Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,596 Points
Jason Anello
Jason Anello
Courses Plus Student 94,596 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.