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
Thomas MacFarlane
2,430 PointsCreating Flexible Margins - Nav Bar Wrapping on Smells Like Bakin Website
When I change the margin-right of the CSS rule:
ul.nav li {
float: left;
margin-right: 40px;
}
From px to %, even though the amount of margin is exactly the same, the nav bar shrinks in width and wraps onto a new line. Can someone please tell me what is happening?
I have two screenshots to demonstrate this:
With margin-right of 40px: http://www.screencast.com/t/0IrZ7m8uIkL
With margin-right of 10.5%:
http://www.screencast.com/t/V7wHHVhAeChA
PS Please don't reply in the 'Answer' section if you have a question, that puts this discussion in the 'Answered' category when it isn't. Thanks.
1 Answer
Thomas MacFarlane
2,430 PointsSOLVED! This is most likely why the Nav Bar has been re-invented in the beginning of Responsive Web Design -
From: http://reference.sitepoint.com/css/margin-right
""If the containing block’s width depends on the element to which percentage margins are applied, the resulting layout is undefined in CSS2.1. More verbosely this would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has margin expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent's width to compute its margin (and hence its dimensions)."
So to anyone who may be wondering why the Nav Bar has been changed and why it cah't be made responsive, this is why! I'll be sending in a note to support to see if they can explain a few of these issues so other's don't fall into the trap.
Sam Hayward
11,673 PointsSam Hayward
11,673 PointsHey, I'm confused as to how you got a margin-right of 10.5% for the <li> since the containing <ul> does not have a defined width to use as a context. You say the nav bar cannot be made responsive, so do you just leave it at 40px? Would be very grateful for any clarification =)
Sam Hayward
11,673 PointsSam Hayward
11,673 PointsHey, I'm confused as to how you got a margin-right of 10.5% for the <li> since the containing <ul> does not have a defined width to use as a context. You say the nav bar cannot be made responsive, so do you just leave it at 40px? Would be very grateful for any clarification =)
Thomas MacFarlane
2,430 PointsThomas MacFarlane
2,430 PointsHello Sam, forgive my late reply, I have had my account paused while I have been studying other things.
The 10.5% was an arbitrary number picked because it gave a margin of approximately 40px.
You are correct that the containing does not have a defined width to use as a context, this is precisely why I encountered the error that was causing me problems. The nav bar CAN be made responsive, but as you said, it would require all its higher-level containers to have a responsive width as well.
Tom.
Sam Hayward
11,673 PointsSam Hayward
11,673 PointsCool, thanks for the reply =)