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

HTML

Posted by Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Unusual HTML or CSS error , or at least not sure what to do with it

Hello, I have been layouting my all webages around 30 layout like this , but now theres a white space between the sections . Im not sure whats wrong with it . I use a normalize css so therefore margins and paddings are set on 0 and it doesnt make any difference . I didnt include normalize there because it loads forever.

http://codepen.io/anon/pen/ykdfs

4 Answers

mobilesuitcake
mobilesuitcake
7,493 Points
mobilesuitcake
mobilesuitcake
7,493 Points

Try adding this in:

h1,
p {
    margin: 0;
}

Or alternatively, you can add this ugly CSS in:

header,
#leftBar,
#rightBar,
section,
footer {
  padding: 10px;
}

Adding either one will remove the white spaces. The h1 and p elements have margins which push other elements away. Either take away their margins or put some padding on surrounding elements.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

the first code is more likely , the second code i woudnt use althought it can be nice but there would be quite a lot of white space i guess :) thanks

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

to understand what it is instead of telling you. type this in your css.

body {

background-color: blue;

}

with the result you will understand what is happening

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Yes i see it , for some reason it goes throw the outerDiv but i guess i shoudnt , or theres something im doing wrong? i had break one month thought that error is unusual. I can chage the outerDiv to white etc.. ut this blocks wont stack up for some reason .

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

it's not an error man, it's just your background color that is showing between . Why do you think it's anerror?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

this blocks should be together, there shoudnt be a white background beetween, it should be one on top of other. And as error coz i never had this problem . One on top of other i mean touching each others with shoulders ot actulay one on another

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

Have you tried this in a regular browser? I'm not sure exactly what is going on, but when I check the "reset" box in the CSS in Codepen it works like you are expecting it should...all the boxes are touching with no background bleeding through. When I check the "Normalize" checkbox, I also get the background showing through. I have to admit though that I'm not too familiar with CodePen to really be able to say what's going on.