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 Layout Techniques Positioning Schemes Absolute Positioning

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

.col 30%

Hello, I have not retyped this code, this is a copy of the css code that the instructor uses.

1) I cant understand why he gives .col a 30% 2) what does it mean to give primary-content a left:30%

.col {
        width: 30%;
        position: absolute;
    }
    .primary-content {
        width: 40%;
        left: 30%;
    }


/* Page Styles
================================ */

* {
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
}
html,
body {
 height: 100%;
}
body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a        { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout
================================ */

.main-header {
    padding: 15px;
    min-height: 100px;
}
.main-nav li {
    margin-top: 15px;
}
.main-logo a, 
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
}
.main-footer {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Column Layout
================================ */

.col {
    padding: 20px;
}
.extra-content,
.main-banner {
    display: none;
}

/* Imagery
================================ */

.feat-img {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border: solid 1px;
    padding: 5px;
}

/* Float Clearfix
================================ */

.group:after {
  content: " ";
  display: table;
  clear: both;
}

/* Media Queries
================================ */

@media (min-width: 769px) {

    .main-wrapper,
    .content-row,
    .col {
        height: 100%;
    }

/*  .main-wrapper {
        width: 95%;
        margin: auto;
    }*/

    /* Header, Banner and Footer Layout
    ================================ */

    .main-header {
        position: relative;
    }

    .main-logo,
    .main-nav {
        position: absolute;
    }
    .main-logo {
        top: 20px;
        left: -10px;
    }
    .main-nav {
        bottom: 35px;
        right: 25px;
    }

    .main-nav li {
        margin-right: 6px;
        margin-left: 6px;
        display: inline-block;
    }
    .main-banner {
        background: #dfe2e4;
        text-align: center;
        padding: 35px 15px;
    }

    /* Column Layout
    ================================ */

    .extra-content,
    .main-banner {
        display: block; /* Unhide from mobile view */
    }
    .content-row {
        position: relative;
    }
    .col {
        width: 30%;
        position: absolute;
    }
    .primary-content {
        width: 40%;
        left: 30%;
    }
    .secondary-content {
        right: 0;
    }



    /* Imagery
    ================================ */

    .feat-img {
        width: 50%;
        float: left;
        margin-right: 25px;
    }
}

3 Answers

Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

orange sky,

the .col {width: 30%;} gives your .col element a width of 30% of the parent element(most likely the wrapper element).

In contrast, the .primary-content{left:30%} is setting this element 30% from the left side of the page. (can't use w/o absolute positioning).

Not sure if this answers your question, but hope this helps.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Jason,

1) Is .col{width:30%;} still necessary int the code? It seems to me these 2 statements are enough: primary-content{width:40%; left:30%} .secondary-content { right: 0; }

2) Can you please rephrase: the .primary-content{left:30%} is setting this element 30% from the left side of the page. (can't use w/o absolute positioning). also what does this mean: can't use w/o absolute positioning, why do they need each other? Also, can left be 40% or other percentages, why 30%

Cheers!!

Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

Orange,

Let's see if I can be more of assistance. After looking through the HTML of the project files from the video you just watched, I think I can help out a little more.

/* =======for this section of videos you are trying to setup a three column layout - the first step in the CSS the teacher has selected are the .main-banner and the first column in the three column body layout (.extra-content) */

/* First column of three columns - will be 100% width in mobile view  */
    .extra-content,
    .main-banner {
        display: block; /* Unhide from mobile view */
    }

/* This element is acting as the wrapper for the three columns, and even though the .extra-content CSS has already been written, it also would fit in this wrapper (if you open up the HTML you can see this easier)

Also, for the absolute positioning to work on the child elements within this parent element, this is where position:relative needs to be established.
 */
    .content-row {
        position: relative;
    }

/* This class is applied to all three columns (.extra-content, .primary-content, and .secondary-content). Also, since we applied the relative position to the above element, now we can use position:absolute.

Finally, the column width:30% on this element just ensures the three column layout remains about the same equally width */

    .col {
        width: 30%;
        position: absolute;
    }

/* This class is just setting up the middle section of the page, it's ensuring the width is 40%, and it's creating a somewhat of a right float with the left:30% positioning style being applied.

Also, since this portion of HTML also has .col class, these following classes will also be absolute postioned
 */

    .primary-content {
        width: 40%;
        left: 30%;
    }

/* Finally, this element is the third and final column in the three column, and it is positioned to the far right (thus the right:0 style) 
    .secondary-content {
        right: 0;
    }

Kind of a lot to explain in one post, so I hope I at least helped you out a little bit.

Cheers

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thank you Jason! I understand the meaning of left:30% :)