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

Posted by Jonathan Musso
Jonathan Musso
3,760 Points

What's the best way to structure this layout so it is responsive?

Hi all. Please use this image as an example of the site layout.

![alt text]http://www.greenblast.com/mockups/concept-2.jpg

It's been some time...

I can't create 3 divs with % widths?

    <div id="main">
        <h1>hardcoded</h1>
    </div>
    <div id="secondary">
      <h2>example heading</h2>
      <p>some paragraph</p>
    </div>
    <div id="tertiary">
      <h2>another example heading</h2>
      <p>and yet another example paragraph</p>
    </div>

#main {
    width: 25%;
    background: red;
    float: left;
}
#secondary {
    width: 37.5%;
    background: blue;
    float: left;
}
#tertiary {
    width: 37.5%;
    background: green;
    float: left;
}

As soon as I add padding the floats break. What am I missing? I should feel ashamed.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jonathan,

Your widths add up to exactly 100%. The widths you've set apply to the content box. Padding then gets added on to that making it all wider than 100% and all 3 no longer fit.

One solution is to use box-sizing: border-box on those 3 div's. This uses the border-box model which causes the padding and borders to be absorbed into the width calculation.

Jonathan Musso
Jonathan Musso
3,760 Points

Thanks! Appears to be working. How should I modify it if I want the #main div to be a fixed pixel width? What is the optimal method for setting the height to 100%?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Jonathan,

I saw you posted another question and received an answer on your 100% height question.

How are you coming along with the fixed width div? Could you be a little more specific on what you want for that?

Also, you may want to check out the "CSS layout techniques" course here on Treehouse. That could be a big help to you with your layouts.

Caleb Sylvest
Caleb Sylvest
7,642 Points
Caleb Sylvest
Caleb Sylvest
7,642 Points

The reason the sections are breaking is because the padding adds to the width. So if you add 30px of padding to #main, then #main is no longer 25% wide, but 25% + 30px (left) + 30px (right).

You can fix this by doing one of two things.

  1. The old method. Subtract the padding from the width. In this case, because you are using percents to set the width of the elements you will also need to set the padding as a percent. Like this:
#main {
  width: 21%; /* subtract 25% - (2% + 2%) */
  padding: 2%;
  background: red;
  float: left;
}
  1. The NEW way! The new and better way is to reset the box sizing model of your entire site. The default behavior of browsers is to add the padding and width and border of an element to render its total width, so by changing the box sizing method we can change the behavior. You can do so like this:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

There's no point in me writing a whole article about it as it is extensively covered online. Read the article below, and if you still need more explanation Google 'border box box sizing'.

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Jonathan Musso
Jonathan Musso
3,760 Points

Thank you for this information!