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
natasaantovszky
8,080 Points<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
mikes02
Courses Plus Student 16,968 PointsDo you have anything else in your stylesheet like:
body, html {
height: 100%;
}
natasaantovszky
8,080 PointsNo I have already checked
mikes02
Courses Plus Student 16,968 PointsCan you share the full HTML & CSS you are working with.
natasaantovszky
8,080 Points<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>
mikes02
Courses Plus Student 16,968 PointsCan you share all of your CSS as well.
natasaantovszky
8,080 Points/******************** 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; }
natasaantovszky
8,080 Pointsthis 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....
mikes02
Courses Plus Student 16,968 PointsWith 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
natasaantovszky
8,080 PointsMike 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
natasaantovszky
8,080 PointsThank 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
natasaantovszky
8,080 PointsHi Jennifer thank you for your reply, Its just how i copied and pasted it. I have it on my stylesheet
Jennifer Nordell
Treehouse TeacherI 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.
natasaantovszky
8,080 Pointsi have yes in html document as well
LaToya Legemah
12,600 PointsThe 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
12,600 PointsAlso 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%; }
natasaantovszky
8,080 PointsThank 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?