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 CSS Foundations The Box Model Positioning Properties

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Blank screen

Hi guys and girls.

When I try to run my program, all I get is a blank screen.

Here's my HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Positioning Properties</title>
    <link rel="stylesheet" href="css/css_foundations_style.css">
</head>
<body>
    <div class="wrapper">
        <div class="top">Top</div>
        <div class="middle">Middle</div>
        <div class="bottom">Bottom</div>
    </div>
</body>
</html>

And my CSS:

body {
    margin: 70px 0 0;
    background: #e1e1dd;
    color: #fff;
    font: normal 1.4em sans-serif;
}

.wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 25px;
    width: 80px;
    background: #fff;

.top {
    background: #ff6347;
}

.middle {
    background: #87ceeb;
    position: relative;
}

.bottom {
    background: #20b2aa;
}

.wrapper div {
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}

Any insights you have to offer would be appreciated.

Sean

3 Answers

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey sean, having a quick look at your css you missed the closing } for the wrapper. try to add this in and see if that does the trick - it should ;)

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

After seeing your name, how could I not provide an answer?

I can't see why you would get a blank screen, but in addition to what Alex said...a few things about your <head> tag:

All of the tutorials I've seen on Treehouse use HTML5, which gives you an easier option for your charset declaration. You can just use the following:

<meta charset="UTF-8">

Also, you may want to add type="text/css" to the link to your stylesheet.

Not sure if either of these things would cause a hangup in the system, but it might be worth a shot.

Good luck, Sean Flanagan!

-Shawn Flanigan

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Guys, you are the greatest! I added the missing } and the program works fine now. Thanks.

Sean

P.S. Nice to hear from a guy who shares my name!