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!

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

Abe Layee
Abe Layee
8,378 Points
Posted by Abe Layee
Abe Layee
8,378 Points

Can't float main-nav element to the right with the width property.

Good day all. I have been practicing my css and I came across a small bug. For some reason, I can't float my main-nav element to the right while it has the width property within the main-nav. Can anyone please share some knowledge with me why the nav can't be floated to the right width property? Without the width property,it works fine and thanks in advance.

</head>
<body>
   <div id="wrapper">
    <nav class="main-nav">
        <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#Portfolio">Portfolio</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav><!--nav end-->
   </div><!--wrapper end-->

/************************************************
    PAGE:NAVIGATION;
************************************************/   

.main-nav {
    float:right;
    width:100%;

}

.main-nav ul li {
    list-style:none;
    padding:0;
    margin:0;
}

.main-nav ul li {
    display:inline-block;
     margin:3px 3px;
     padding:0 15px;
     background-color:crimson;
}

.main-nav ul li a {
    text-decoration:none;
    color:#ddd;



}
Gary Porter
Gary Porter
11,139 Points
Gary Porter
Gary Porter
11,139 Points

I'm not sure, but I think setting width:100%; makes the element use all of the available space, so it has no room to float. If you want one element to float:right; of another, the total width of both elements need to be <= 100% of their parent element.

I'd check make sure the nav is only as wide as it needs to be, but maybe you want the individual nav links to float:right;?

2 Answers

Matt F.
Matt F.
9,518 Points
Matt F.
Matt F.
9,518 Points

Hi Abe,

float: right; will make the element float to the right side of its containing element. Since you have set .main-nav to be 100% of the containing it has nowhere to float.

To get it to work correctly, remove the float from the .main-nav element and add the following: 

.main-nav ul{
    float: right;
}

Hope this helps, Matt

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thanks you guys. I understand now.