Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

<div id="wrapper"> talking up full height

Hope someone can clarify div#wrapper a bit further. After completing this work-space I have decided to change few things mainly colors and borders and then i realized after giving div#wrapper border or color that it takes us full height.

Why Is there border and color talking up full height of body element? I wanted border set only for section incl footer and not header as well. Does div has default height of 100%?

12 Answers

Do you have anything else in your stylesheet like:

body, html {
height: 100%;
}

No I have already checked

Can you share the full HTML & CSS you are working with.

<body> <header> <a href="index.html" id="logo"> <h1>Nati Design</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="images/numbers-01.jpg"> <img src="images/numbers-01.jpg" alt=""> <p>Number 1 Design Experiment/ colors, shapes, shadows, sizes and many more</p> </a> </li> <li> <a href="images/numbers-02.jpg"> <img src="images/numbers-02.jpg" alt=""> <p>Number 2 Design Experiment/ colors, shapes, shadows, sizes and many more</p> </a> </li> <li> <a href="images/numbers-06.jpg"> <img src="images/numbers-06.jpg" alt=""> <p>Number 6 Design Experiment/ colors, shapes, shadows, sizes and many more</p> </a> </li> <li> <a href="images/numbers-09.jpg"> <img src="images/numbers-09.jpg" alt=""> <p>Number 9 Design Experiment/ colors, shapes, shadows, sizes and many more</p> </a> </li> <li> <a href="images/numbers-12.jpg"> <img src="images/numbers-12.jpg" alt=""> <p>Number 12 Design Experiment/ colors, shapes, shadows, sizes and many more</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="images/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Natasa Antovszky.</p> </footer> </div> </body>

Can you share all of your CSS as well.

/******************** GENERAL *********************/

body { font-family: 'Playfair Display', serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; border: 2px solid black; }

a { text-decoration: none; }

img { max-width: 100%;

h3 { margin: 0 0 1em 0; }

/******************** HEADINGS *********************/

header { float: left; margin: 0 0 10% 0; padding: 5% 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Marck Script', cursive; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************** NAVIGATION *********************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block;/*will stand inline but will have block features such as with and height */ }

nav a { font-weight: 800; padding: 15px 10px; }

/******************** FOOTER *********************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

this is from workspace followed here from Nicks tutorial but as i said if i removed header and nav background-color property and gave #wrapper border property or background-color, it would take up full height....

With the code you've provided I setup a local copy and it doesn't take up the full height, this is what I see Test

Mike in your test did you close img selector on css? I copied it by mistake without closing it and funny enough without closing it div#wrapper doesn't take up full height. If you close img tag you will see how div is talking full height of body. Regards

Thank you! That is how i wanted it to be but for some reason it doesn't.. Could it be something in normalize.css html is linked to? I have checked for height 100% but couldn't find it

Hi Jennifer thank you for your reply, Its just how i copied and pasted it. I have it on my stylesheet

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I figured that might be the case, which is why I removed the answer. But you do have a body tag in your html document, yes? Note: not talking about the css file.

i have yes in html document as well

LaToya Legemah
LaToya Legemah
12,600 Points

The wrapper takes up the height of the page 100% because the wrapper starts after the header and doesn't end until after the footer.

One of the purposes of the wrapper is to act like the "parent". If elements inside the wrapper need to be positioned they refer to the parent. For instance if centering text, it refers to the parent as a point of reference to know where center is. From my experience its normal convention to put everything inside the wrapper to assist with layout.

If you don't want the footer to have the same background as the footer, you can add specific CSS to the footer div. You could also close the wrapper before the footer but I wouldn't advise it.

Let me know if this helps or you need more clarification.

LaToya Legemah
LaToya Legemah
12,600 Points

Also there is an error CSS that may cause it not to work correctly.

Line 9: img { max-width: 100%; needs a closing tag img { max-width: 100%; }

Thank you LaToya for your answer. I did close img selector in my stylesheet, Its just how I copied it. I thought I started to understand a bit more about div's however there are still some issues I don't fully understand.

So in the previous example I removed under header selector - float: left; property and now div#wrapper worked the way i wanted , it applied styling (border/color) only after section tag and not whole body...

Could someone help to clarify?