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

Jennifer Lee
Jennifer Lee
8,136 Points
Posted by Jennifer Lee
Jennifer Lee
8,136 Points

Floating LI Menu Items Left and Right, Weird Spacing On Floated Left Item

I am working on a project with a menu that is floated left and right. I have included the code for review. Basically the li menu item for the header-title is not flush with the left page margin (5% margin). The floated right items seem to be however.

html body: https://codeshare.io/JagEA

<header>
  <ul class="header-menu">
    <li class="header-title">Southwest Manitoba Regional Foundation</li>
    <li class="right">Contact</li>
    <li class="right">News & Recipients</li>
    <li class="right">Apply</li>
    <li class="right">Donate</li>
  <ul>
</header>

css file: https://codeshare.io/Te4bC

body {
  margin: 0 5%;
  font-family: "adelle-sans", "Adelle Sans";
}

.header-title {
  font-family: 'Slabo 27px', serif;
  float: left;
  list-style-type: none;
  font-size: 24px;
}

.right {
  list-style-type: none;
  display: block;
  float: right;
  padding: 0 8px;
  font-size: 18px;
  padding-top: 6px;
}

I am reviewing videos because I am pretty sure this was talked about somewhere in CSS Layout Basics but I can't seem to find the right video.

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

I'm not sure what do you mean, but have you tried using a clearfix? Since you're floating elements, that might fix any problem.

   .clearfix::after {
     content: '';
     display: table;
     clear: both;
   }

Just add the .clearfix class to the ul element

4 Answers

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

Your header-title is a list item of an unordered list, and so it is offset by the default padding.

:point_right: You probably want to turn off the default padding of the UL:

ul.header-menu { padding-left: 0; }

The clearfix isn't important in resolving this issue, although you might want to apply one to the ul.header-menu in case you want to add elements after it.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Given that I can't see all of your code except these two sections it might be difficult to isolate. But my initial response is to say that you have specifically set a right and left padding of 0px on the "right" class. What happens if you also specifically set a padding of 0px on the "header-title" class? I'm wondering if there might be some browser default added padding or something with Bootstrap etc that contains padding you're not seeing. It might be wise to inspect that particular li element in the dev tools and see if you can see a margin or padding there that's taking up space.

Jennifer Lee
Jennifer Lee
8,136 Points
Jennifer Lee
Jennifer Lee
8,136 Points

The clearfix does not seem to change the code at all. This is the full code of the HTML and CSS so far. I got it to work a bit by setting the header-title to block display with a negative margin, but this is going to be a responsive design and I am not sure about scaling. I can work on it though.

<!DOCTYPE html>
<html>
  <head>
    <!-- stylesheet links -->
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <!-- end stylesheet links -->
    <title>The Southwest Manitoba Regional Foundation</title>
    <!-- typekit code -->
    <script src="https://use.typekit.net/gss1vew.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    <!-- end typekit code -->
    <!-- google fonts code -->
    <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
    <!-- end google fonts code -->
  </head>

  <body>

<!-- Website Header -->

<header>
  <ul class="header-menu clearfix">
    <li class="header-title">Southwest Manitoba Regional Foundation</li>
    <li class="right"><a href="contact.html">Contact</a></li>
    <li class="right">News & Recipients</li>
    <li class="right">Apply</li>
    <li class="right">Donate</li>
  <ul>
</header>

<!-- SVG Path -->


  </body>
</html>

body {
  margin: 0 5%;
  font-family: "adelle-sans", "Adelle Sans";
}

.header-title {
  font-family: 'Slabo 27px', serif;
  float: left;
  display: block;
  /* margin-left is used to decrease accidental margin on floated left title 
  margin-left: -29px;*/
  list-style-type: none;
  font-size: 24px;
  color: #181672;
}

.right {
  list-style-type: none;
  display: block;
  float: right;
  padding: 0 8px;
  font-size: 18px;
  padding-top: 6px;
}

.right a {
  color: #181672;
  text-decoration: none;
}

.right a:hover {
  color: #6A69B7
}

.right a:active {
  color: #181672
  font-weight: bold;
}

.clearfix::after { content: ''; display: table; clear: both; }
Jennifer Lee
Jennifer Lee
8,136 Points
Jennifer Lee
Jennifer Lee
8,136 Points

Thank you, I am going to try that.

Thank you everyone for your responses! It really means a lot!

If I do not report back, consider this case closed.

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

You "close" it when you select a best answer.

Jennifer Lee
Jennifer Lee
8,136 Points
Jennifer Lee
Jennifer Lee
8,136 Points

Thank you, this is my first forums topic I believe :) Learning how to use the forums, woo!

Jennifer Lee
Jennifer Lee
8,136 Points
Jennifer Lee
Jennifer Lee
8,136 Points

Thank you, this is my first forums topic I believe :) Learning how to use the forums, woo!