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 Lorenzo Dossi
Lorenzo Dossi
3,116 Points

A design problem

I wanted to have three blocks side by side that they covered the entire available space and reduced their length in relation to the same page , so I used '%' instead of the px value but it did not work, what's wrong ?

this is the style.css

body {
    margin: 0;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
}

.strisce {
    float: left;
    display: inline-block;
    height: 100px;
    width: 0 33.333%;
}

header {
    background: blue;
    border-bottom: yellow solid 10px;
    border-top: yellow solid 10px;
    border-left: yellow solid 10px;
}

main {
    background: yellow;
    border-bottom: green solid 10px;
    border-top: blue solid 10px; 
}

footer {
    background: green;
    border-top: yellow solid 10px;
    border-bottom: yellow solid 10px;
    border-right: yellow solid 10px;
}

p {
    margin: 0;
    padding: 10px;
}

and this is my index.html

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>Titolo Insomma</title>
    </head>
    <body>
       <section>
        <header class="strisce">
            <p>header</p>
        </header>
        <main class="strisce">
            <p>main</p>
        </main>
        <footer class="strisce">
            <p>footer</p>
        </footer>
        </section>
    </body>
</html>

THANKS !

2 Answers

Erik Nuber
Erik Nuber
20,629 Points

Add this line of code and it will work as you want.

* {
   box-sizing: border-box;
}

The * is the universal selector. if you really wanted to make sure all properties started equal, you could add in *:before and *:after as well.

This tells the browser that the width and height properties include content, padding and border but not margin.

The default is content-box and would include only the content. This is why you couldn't use the 33.3333% because the borders you were creating were adding into the the width that already existed and, 33.3333% * 3 is basically already 100%.

Lorenzo Dossi
Lorenzo Dossi
3,116 Points

Thanks a lot ! Really helpful and detailed answer.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

The issue is that you are using borders who's widths are 10px.

As you have your code, the max width you can have would be

.strisce {
  width: 32.9%
}

The rest is made up of the borders on the left and right sides.

http://codepen.io/enuber/pen/akKGyk/

Lorenzo Dossi
Lorenzo Dossi
3,116 Points

why 32.9 and not 100:3=33.33% ?