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 Basics (2014) Basic Layout box-sizing and max-width

Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points
Posted by Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points

Why doesn't the div nested in div.secondary-content stretch to the full width of the screen?

<div class="secondary-content t-border"> 
    <div>
        <img src="img/resort.jpg" alt="Resort">
        <h3>From Tents to Resorts</h3>
        <p>
          Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
        </p>
        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
        </ul>       
      </div>
</div>

When I inspect the div on the second line, its width is only 800px, equal to the width of the image inside of it. Why isn't its width 100%, stretching the whole screen? Isn't div a block-level element?

3 Answers

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

No I don't think you can, but remember that in this course, the secondary-content div's width gets set to 75% of the parent element, so the content inside of it will take up the width available that the secondary-content div has (75%) of the browser window.

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Can you please edit your code so we can see it better by adding the markdown reference (you can see examples below how to do that with the markdowns cheatsheet) to your html code like so:

<p>My html code</p>

And can you also add your css code so we can help you further. Thanks.

Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points
Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points

I found out that the second div takes the full width of the content of div.secondary-content. Is there anyway I can delete my question?