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 CSS Layout Techniques Float Layout Creating a Horizontal Menu

Tom Berry
Tom Berry
6,370 Points

Unclear on how size of header elements change

I think there are two parts to my question: 1) When this CSS rule is applied:

.main-logo a, .main-nav a { display: block; color: white; text-decoration: none; text-align: center; padding: 5px 15px; border-radius: 5px; }

why do the elements occupy the entire width of the header space? Does "block" automatically do this when no width is applied?

2) When the above elements are floated, why do the Logo and list elements sizes (width), shrink to their 'padded' size?

I have read the MDN page on floats but I'm still not clear on this.

Thank you

2 Answers

For your first question, you're on the right track. "Display: block" means the the element will block out the entire width of the screen, even if that element is not wide enough to take up the whole screen. The opposite of this is "inline", which means that the elements will sit next to each other. Divs and spans are the generic versions of these types of elements, respectively.

<div style = "border: 1px solid black">Test line 1</div>
<div style = "border: 1px solid black">
  <span style = "color: red">Test</span> 
  <span style = "color: blue">line 2</span>
</div>

In the above example if you paste into an editor and load in a browser, you'll see that the divs push each other down while the span simply colors the second test line (the borders fill the screen's width). Note: this isn't good code, but simply a basic illustration to show you what we're discussing.

Second, when you float an element, it is taken out of the page flow. That element is no longer treated as a block-level element, it's treated as its own item. Because it's no longer in the page flow, it defaults down to only the size of the element + padding and margin. A good example is when you float an item in a container, that container will actually shrink because it doesn't think that any items are inside it. For instance:

<div style = "border: 1px solid black">
  <p style = "float: left; border: 1px solid green">Test line 1</p>
</div>
<div style = "border: 1px solid black">
  <span style = "color: red">Test</span> 
  <span style = "color: blue">line 2</span>
</div>

Test Line 1 is shoved under the block-level elements and its container div has collapsed to look like a thick, double-wide border. The paragraph (p) that is normally a block-level element has collapsed to only be the width of the words "Test line 1". That's why sometimes you'll see a "clearfix" class - something to make sure the floats are stacking under each other properly and creating a different page flow.

Floats are complex and can lead to a lot of workarounds, headaches, and hacks. Hopefully this gets you started on the right track.

Tom Berry
Tom Berry
6,370 Points

Travis,

Thank you for the excellent explanation. I was slipping up on thinking the floated element was still being treated as block-level element.

Thanks.