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

Ben Taylor
Ben Taylor
902 Points
Posted by Ben Taylor
Ben Taylor
902 Points

Best way to implement 100% responsive width

Hey guys,

I just did the responsive course on here and it's great for working with a 960 grid.. but the design I'm having to code has a header that, although the content is within 960px, the width of the div needs to span 100% across the page.

Now am I being stupid? What's the best way to achieve this as I'm guessing the grid css we worked on will not do this?

Thanks in advance and apologies if I'm missing something really obvious.

Ben

3 Answers

Ben Taylor
Ben Taylor
902 Points
Ben Taylor
Ben Taylor
902 Points

That's what I was thinking.. but how do I have a div that is 100% in width, but so that the content is within a centered 960px portion of it?

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Ah, I misread and didn't realize you wanted the content of the header to be 960px as well.

Have a look at this pen where I have used the above code (with a couple of tweeks) brought in the grid styles from smellslikebakin, added some of my own.

My solution uses an extra div (with a class of .content) inside the 100% with header and footer which positions the content of those div's in the center with a max width of 960px.

.content {
  margin: 0 auto; /* a right & left margin of auto will place the element in the center of it's containing element */
  max-width: 960px;
}
Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

.content and the original .container from smellslikebakin share many properties so you could likely create one class to use in both places (i.e. a common class for centered content with max-width 960px).

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

You could start the grid container lower down so that you can have a header outside of the grid and apply styles separately as needed. If you wanted a larger footer you could do the same again, this time ending the grid container before the footer starts.

e.g.

<header>
   <h1>A Wonderful Header</h1>
</header>

<!-- start of grid container -->

<div class="container grid_12">
  <div class="grid_4 alpha">
     <p>A cool sidebar.</p>
  </div>
  <div class="grid_8 omega">
    <p>A neat bit of content.</p>
  </div>
</div>

<!-- end of grid container -->


<footer>
  <p>Look at my feet.</p>
</footer>
Ben Taylor
Ben Taylor
902 Points
Ben Taylor
Ben Taylor
902 Points

You sir, are great..thanks very much :)