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

Posted by stevencooper
stevencooper
5,755 Points

Positioning Prptys. - I can't get my webpage to duplicate instructor's using absolute positoning

I'm learning positioning using CSS. The instructor's webpage shows one thing, my CSS stylesheet is a duplicate of the instructor's, but the result is quite different.

Here is the index.html page:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Positioning</title>
    <link rel="stylesheet" href="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>

& here is the 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: 80%;
    background: #FFF;
}

.top {
    background: #FF6347;
}

.middle {
         background: #87CEEB;
         position: absolute;
         right: 0;
         bottom: 0;
}

.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);
}

The above CSS code, with the .middle class' position property set to 'relative', forms 3 boxes of different colors sitting one on top the next, down the left side of the div "wrapper".

now, according to what the instructor's page shows when the "position: absolute; (offset) right: 0; (offset) bottom: 0;" declaration is used, the middle box element should be in the bottom right corner of the div 'wrapper'; instead, my box is in the lower right corner of the viewport, well outside the div "wrapper".

Can anyone try the code & tell me if I'm missing something? Thanks

1 Answer

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Steven,

I made a few changes to your css,
I gave your wrapper a relative position.
I also changed your .wrapper div to .top, .middle, .top as that is actually what your trying to target, i also moved it further up your 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: 80%;
    background: #FFF;
  position: relative;
}

.top,
.middle,
.bottom{
    width: 150px;
    height: 150px;
    text-align: center; 
    line-height: 150px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.top {
    background: #FF6347;
}

.middle {
         background: #87CEEB;
         position: absolute;
         right: 0;
         bottom: 0;
}

.bottom {
    background: #20B2AA;
}

if you have any questions about the changes just ask.

stevencooper
stevencooper
5,755 Points

Thanks for your help