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

Stein Christensen
Stein Christensen
3,592 Points
Posted by Stein Christensen
Stein Christensen
3,592 Points

Help with child element over flowing

My goal is to style a navigation with a larger logo that extends above and below the navigation.

Including the logo in the navigation, floating it left, and clearing it does not solve the problem because navigation now stretches to include the height of the large logo.

Help is greatly appreciated!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I should have asked a clarifying question before answering.

Do you have a background color applied to your navigation or do you have it applied to your header?

mattlebl
mattlebl
10,849 Points

Could you provide us with your header plus some content and your CSS in CodePen? This will really help to diagnose your issue and will help you get a speedy response.

Cheers!

3 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

If your logo is inside the navigation and you want it to be placed "freely" or outside the bounds of it's parent (the navigation) without affecting the parent, then you can use position: absolute on the logo. That way you can adjust the size and placement to your liking.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Have you tried using a negative top and bottom margin on your logo?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

If you have markup similar to the following then the negative margins should do what you need.

<header>
  <img src="path/to/your/logo" alt="" id="logo" />
  <nav role='navigation'>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>
Stein Christensen
Stein Christensen
3,592 Points
Stein Christensen
Stein Christensen
3,592 Points

That worked great Jason thank you! In combination with absolute positioning I have what Im looking for.

It is a little buggy in mobile layout however. I set the logo to inline block to allow the nav elements to resize the logos width, however the height does not change as the view port shrinks.

I set the logo size as a %, but it does not resize properly maybe because it is floated.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stein,

Do you have the mobile problems resolved yet?

Maybe either post the relevant code or better yet put it in a codepen and we can test.

mattlebl
mattlebl
10,849 Points
mattlebl
mattlebl
10,849 Points

Although this thread is now old, answers to this question and many more about the subject can be found in The CSS Layout Techniques Course. For this question specifically, The relative and absolute positioning lessons in the Positioning Schemes chapter is relevant.