Help - CSS float not working with ul in CodePen

1

Hello wonderful people.

I’ve just started on the portfolio project and I can’t figure out what’s screwy with my float.

I’m using <ul> to make some navigation link/buttons, and am trying to do a vertical navigation list. It works beautifully until I try and float it to the right. Then they all display on the same line.

Any thoughts? Anything is appreciated! I’ve been frustrated with it long enough, hopefully someone else can spot the issue.

Here’s my pen:

See the Pen Portfolio Page (FCC) by Jeannette (@jp40684) on CodePen.

2

Here’s why…

you applied float:right to the ul property.

But each of your button is in it’s own ul property, so they just followed what you told them to do.

Need to change your html code to be like this.

  <ul>
    <li>
      <h4>About Me</h4></li>
  
    <li>
      <h4>Portfolio</h4></li>

    <li>
      <h4>Contact</h4></li>
  </ul>

Where each element is an li element. Then your whole menu moves to the right with the ul float:right

3

To add to what owel said. You’ll want to add your button styling to the li elements. Move background-color and border-radius to the li and set display to block.

2 Likes
4

Yes, that makes sense, thank you!
However, I made them each their own ul property so I could get some space between them, so they look more like buttons. Without that they’re all lumped together.
Is there anyway to accomplish both?

5

Remove background-color from ul and put it in li, and add a few more code

li {
  margin:10px 10px 10px 10px ;
  padding:10px 10px;
  display:block;
  text-align:center;
  background-color: #9999ff;
  border-radius: 10px;
}

The 3rd number in the margin property is the “bottom” margin, adjust that for the spacing you want for your buttons.

1 Like
6

Yes!! Thank you so much! So obvious now of course :slight_smile: