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.

HTML Build a Simple Website Styling Content Finishing the CSS

Navigation wont float right

.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

.btn:hover { background-color: #4CC4A7; }

ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }

12 Answers

Samuel Johnson
Samuel Johnson
9,152 Points

<div id="nav" class="grid_8 omega"> <ul> <li class="about"><a href="#">About</a></li> <li class="pricing"><a href="#">Cupcakes & Prices</a></li> <li class="locations"><a href="#">Locations</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </div>

Just quickly note in this example you are giving the div an id of 'nav' so when selecting it you must have everything written down as #nav .... not '.nav' which is selecting the class of nav. When you use the HTML5 'nav' selector you can use just 'nav'

Matt Trask
Matt Trask
10,027 Points

do you have the rest of your code?

Matt Trask
Matt Trask
10,027 Points

do you have the rest of your code?

Can you provide the HTML as well?

body { font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }

a { color: #4FB69F; text-decoration: none; }

h1 { font-size: 1.750em; letter-spacing: -1.5px; }

h2 { font-size: 1.500em; color:#B4C34F; }

.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

.btn:hover { background-color: #4CC4A7; }

ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }

Sorry, this is the css. We would like to see the HTML code associated with this, please?

Are you trying to get the entire navigation to float right? or just each navigation link to float right in relation to eachother? (i.e a horizontal navigation?)

<!DOCTTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega" <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div> <div class="grid_3 omega"> <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"> </div>

<div id="featured-cupcake" class="grid_7">
  <h2>Cupcake of the Week</h2>
  <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste into fiesta mode!</p>
  <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>

<div id="new-cupcakes" class="grid_5 omega">
  <h2>Fresh Out the Oven</h2>
  <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>. </p>
  <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
</div>  

<div class="grid_7">
  <h2>Inside the Kitchen</h2>
  <p>Smells Like Bakin' started out in the garage of the husband wife duo Alison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash foward to today and they have a successful store front, catering business and cupcake truck. </p>
  <p><a href="#" class="btn-small">Read More</a></p>
</div>

<div class="grid_5 omega">
  <h2> Get Bakin' with Us</h2>

  <div id="contact"
    <p>Call us: <span>1-555-CUP-CAKE</span><br>
    Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
  </div>

  <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take request!</p>
  <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
  <a href="http://www.twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>
</div>

<div id="copyright" class="grid_12">
  <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>

</div> </body> </html>

<!DOCTTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega" <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div> <div class="grid_3 omega"> <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"> </div>

Matt Trask
Matt Trask
10,027 Points

You dont have any of the UL or LI listed in that code.

To get it to float right, you wanna target the class. so from what I have when I did the "Smells Like Bakin" project, the nav was a class. so you wanna do "#nav ul {float: right;} plus whatever else is in the styles

Matt Trask
Matt Trask
10,027 Points

```<div id="nav" class="grid_8 omega"> <ul> <li class="about"><a href="#">About</a></li> <li class="pricing"><a href="#">Cupcakes & Prices</a></li> <li class="locations"><a href="#">Locations</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </div>

Samuel Johnson
Samuel Johnson
9,152 Points

Well i did write out a long message which appears to have been deleted...

You have written the selector as ul.nav this is selecting the element with the class of 'nav' not the actual nav or even the element with id of nav. Please try either #nav ul{float:right;} or nav ul{float :right;}

this depends on how your code written out..

Thanks Matt Trask. Your code wasn't 100% right but sure did help.

<div id="nav" class="grid_8 omega"> <ul class="nav"> <li class="about"><a href="#">About</a></li> <li class="pricing"><a href="#">Cupcakes & Prices</a></li> <li class="locations"><a href="#">Locations</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </div>

Matt Trask
Matt Trask
10,027 Points

sweet, glad I could help.