How to add a button to a header?

You could do something like this....

<!-- HTML code -->
<header>
  <div id="logo"><!-- image here --></div>
  <nav>
     <ul>
         <li><button>link 1</button></li>
     </ul>
  </nav>
</header>

/* css */
#logo {
  width: 40%
  float: left;
}

nav {
 width: 40%;
  float: right;
}

Of course I could go more in-depth, but this gives you an idea.

</TREagans>

Zach,

As Thas mentioned, you could position your elements using the float property to achieve the desired effect. However, using float comes with its own bundle of problems, and by this point in the evolution of the web, we ought to strive to move away from abusing float to create the general layout of elements on our site. Float should be used where necessary/applicable, and as intended (for example: to allow for text to flow around an image), but otherwise and for the majority of our site, we should look to other solutions. A fairly simple, solid solution at this point (while other, newer solutions are still being implemented and added to web standards) is to use "display: inline-block" on your elements that you want to sit next to each other, but that you still want to be able to apply styles to, such as positioning, margin, and padding.

Take a look at this very rough, quick pen for an example that will show you a simple header layout of a nav bar and a button (as you specified), with comments to briefly explain how to manipulate your button to be on either the left or right side of your nav, as well as some of the CSS properties that are applied to style the layout.

Feel free to copy and paste the code in that pen into a pen of your own, or into your favorite text editor, and play around with it! Remove elements, add elements, reposition elements, change styles, etc. Find out how to break what's there, and by doing so, discover what is necessary to make the layout you're looking for.

For some more information on the debate between using display: inline-block vs floats for layout, check out the following articles:

1) Should You Use Inline-Blocks As A Substitute For Floats?

2) Give Floats the Flick in CSS Layouts

Additionally, as you continue your classes here on Treehouse, you will be taught these various methods of positioning for your sites, and when/why to use the different options that are available to you. I know it's tempting to jump right in (and that's not a bad thing!), but this information will be presented to you relatively soon as you continue with your studies!

I hope the tangible example of the pen that I shared was able to provide some assistance, and that the articles were able to be digested to some degree (though I know they can be reeeeeeally stuffy and tedious to read a lot of the time)! Often times, the best way to learn is by doing, so please do take the code sample I provided and play around with it to suit your needs. Most importantly: keep up with your studies here on Treehouse, and you'll be the one answering these questions for other students in no time :)

Happy coding!

Erik