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

Success David
Success David
127 Points
Posted by Success David
Success David
127 Points

Am having trouble creating a header with an image logo at the left and the navigation link at the right...

Am having trouble creating a header with an image logo at the left and the navigation link at the right... when i float the image logo to the left and float the navigation links to the right, the header background disappears. Please just help me out with proper way of creating my header section of my website with css styling. thanks

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

To facilitate analysis always show your code. If you're using the workspaces, you can make a snapshot of your workspace and post the link to it here.

4 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

It looks like I guessed correctly. So my first suggestion was giving the header a specific height:

header{
    background: #80ccff;
    max-width: 100%;
    height: 138px;         /* add this line to make height the same as the image */
}

And my second suggestion was to add an element that cleared the floats:

/* add this entire rule to create a clearing element */
header:after {
    display: block;
    content: "";
    clear: both;
}

The first one requires only 1 new line of CSS, but the second one is more versatile and will adapt in case you modify the content of the header later.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Without seeing the code, this is a bit of a guess, but floated elements do not take up space in the normal document flow, so what may be happening is that the container element is collapsing vertically and taking up no space.

You can solve this in a number of ways, including giving the container a specific height, or adding another element to the container after the floated ones that has a "clear: both" property.

Success David
Success David
127 Points
Success David
Success David
127 Points

here is a screen snap of my workspace https://w.trhou.se/e8i6zwxf6g my problem here is the image is not staying within the header section, its growing bigger than the header and the header's height reduces to fit only the <ul>

Success David
Success David
127 Points
Success David
Success David
127 Points

Thanks a lot, this had help fix my problem. I will also like to know if there is was any better approach I would have take to create such header navigation. what am trying to say is, is there a better way you can refactor all of this code or was i doing it right?

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

The more complex a program is, the more different ways there will be to do it. But the main reasons to choose a specific implementation would be to improve efficiency, readability, or to make the code more compact; and I don't see any obvious ways to significantly impact any of those here.