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 Sean Gange-Harris
Sean Gange-Harris
2,123 Points

When is 100% not 100%?

I have started a website design and I CANNOT get my three main content divs to occupy 100% of the body...I can get it to 98% or 99% but as soon as I try to assign 100% of the space my third div goes onto a third row. Am I missing something?

Where can I post my code for you to see?

4 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Sean,

I figured out your problem. When I could see the HTML, I noticed that each of your divs that have a display of "inline-block" have a space in between them. The reason for this is that there is a literal space in between each div element in the HTML. Here's a new codepen link where they successfully take up 100% of the viewport because there are no spaces between the ending div tag of one inline block element and the beginning of another.

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

Sean Gange-Harris
Sean Gange-Harris
2,123 Points

really? :-/

Well that's great that you saw that and thank you for your help.

It's just super frustrating.

Marcus Parsons
Marcus Parsons
15,719 Points

Inline block elements are great, but they do have a few quirks such as spaces causing spacing issues. The reason for this is the part of their inline nature. They are meant to flow with content but also have their own defining qualities. If you can remember to delete the spaces between any inline block elements, then you'll be golden.

If you want to go ahead and select a best answer, we can mark this as resolved. If you have any more questions, I'll answer them for you.

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Sean,

Whenever I've seen that you have content that doesn't exactly stretch to fit 100% of the screen, it is because of padding, margins, shadows, borders, and/or anything I've forgotten to mention that adds extra pixels that is applied to elements. Even just a 1px border can upset the balance between content. Are you perchance working on this in Workspaces? If you are, the easiest way is to post a snapshot of your workspace. You can see how to do that here: http://www.teamtreehouse.com/forum/workspace-snapshots

If you're not and you're not using local images, you can use a service like Codepen.io to paste your data for us to see.

Jorge Salazar
Jorge Salazar
3,805 Points
Jorge Salazar
Jorge Salazar
3,805 Points

Hey Sean, I found this little trick online, maybe it might help you... In your css try typing the universal selector, which is the * on the top of the style sheet then add margin: 0; It would look like this :

  • { margin: 0; }

This will take all margins from the browser. As you add margins they will take the amount of space you decide... Hopefully this helps you!

Sean Gange-Harris
Sean Gange-Harris
2,123 Points
Sean Gange-Harris
Sean Gange-Harris
2,123 Points

My CSS...

  • { box-sizing: border-box; } a { text-decoration: none; } .mainBody { border: 1px solid black; width: 100%; margin: 0; padding: 2px; }

header { border: 1px solid red; } header h1 { display: inline-block; } .mainNav { margin: 2px; border: 1px solid tomato; } .mainNav li { text-align: center; } .banner { margin-top: 2px; border: 1px solid green; text-align: center; } .topContent { margin-top: 2px; margin-bottom: 2px; border: 1px solid blue; } .col { margin: 0; padding: 0; display: inline-block; vertical-align: top; } .col p { display: block; margin: 0; padding: 0; } .primaryContent { border: 1px solid yellow; width: 30%; } .secondaryContent { border: 1px solid orange; width: 40%; } .tertiaryContent { border: 1px solid brown; width: 28%; } footer { margin-top: 2px; border: 1px solid grey; }

it seems I can't add my HTML but basically they are all pretty much empty divs.

Marcus Parsons
Marcus Parsons
15,719 Points

See what I said about the borders? You have those 1px borders around the content and that will not allow you to take up the 100% width of the screen. You have to account for the extra pixels they attach to the outside of the element.

Sean Gange-Harris
Sean Gange-Harris
2,123 Points

The problem is that if I take out the .mainBody border and the column borders and change it all to just backgrounds (i"m using the colors to get layout correct) no change. It's still giving me gaps between the divs with zeroed margins and padding.

Marcus Parsons
Marcus Parsons
15,719 Points

Go to http://www.codepen.io, click New Pen, and dump your data into the appropriate slots. I'd like to fully see what's going on here.

Sean Gange-Harris
Sean Gange-Harris
2,123 Points

Here's the codepen link

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

Sean Gange-Harris
Sean Gange-Harris
2,123 Points

I noticed the .mainBody had a pad of 2px, removed that but no difference. The thing I notice is that the three .col divs seem to have a gap between them and I can't find it dev tools on chrome.