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

Could someone please help me with CSS positioning?

Hey,

I'm having a tough time with Relative and Absolute positioning. I've made lots of pages trying to get it right, and even downloaded Guil's page that he made and built one page step by step, but it still doesn't work.

I'm trying to make a page with a header, 3 columns and a footer. The whole page is in a wrapper called .main-wrapper and the columns or .col are in a div called .content-row.

When I set the height of the .main-wrapper, the .content-row and the .col to 100%, everything collapses. When I set the min-height of these 3 to 100%, it doesn't collapse, but then my footer doesn't go to the bottom.

I've also tried setting the height of the body and the html to 100% and things don't collapse, but the footer doesn't go to the bottom of the page. Not sure what to do. Would really appreciate some help.

Here is my code

/********************
BODY AND HTML SO THAT
THINGS DON'T COLLAPSE
********************/

html, body{
  height:100%;

}

/********************
NAVIGATION
********************/

.main-header{
  min-height:200px;

}

.main-nav{
  padding:0;


}


.main-nav li{

  list-style-type:none;
  background:rgba(150, 150, 150, 1);
  padding:10px;
  margin:5px 0;
  text-align:center;

}

/********************
LOGO
********************/

.main-logo{
  background:rgba(100, 100, 100, 1);
  color:white;
  width:200px;
  text-align:center;
  margin:0 auto;
  padding:10px;

}

/********************
BLOCKS OF CONTENT
********************/


.main-header{
  background:rgba(100, 200, 255, 1);
  color:white;
  padding:25px;
  box-sizing:border-box;
}


.primary-content{
  background:rgba(60, 100, 160, 1);
  color:white;

}

.secondary-content{
  background:rgba(100, 100, 50, 1);
  color:white;

}

.extra-content{
  background:rgba(100, 50, 100, 1);
  color:white;

}

.main-footer{
  background:rgba(100, 100, 100, 1);
  color:white;
  padding:25px;



}

/********************
APPLY TO ALL COLUMNS
********************/

.col{
  padding:25px;
  box-sizing:border-box;

}


/********************
MEDIA QUERY FOR 
LARGER SCREENS
********************/

@media screen and (min-width:768px){


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

  } */ 


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

  }  
.main-header{
  position:relative;

  }
.main-logo, 
.main-nav{
  position:absolute;

  }
.main-nav li{
  display:inline;

  }
  .main-nav{
  right:20px;

  }

.content-row{
    position:relative;

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

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

.secondary-content{
    left:40%;
  }
.extra-content{
    right:0;
  }


}

8 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

Ok this is going to be a very long comment, but I am going to walk you through creating a 3 column layout, using floats and positioning, this is simply my opinion of how I think a 3 column layout should be styled.

Here is the html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Positioning Help</title>
    <link rel="stylesheet" href="styles.css" media="only screen and (color)">
</head>
<body>
    <header></header>
    <section id="main-content">
        <article class="column" id="col-1">
            <div class="column-header">Column 1</div>
            <p class="column-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos culpa doloremque libero id. Architecto accusantium repudiandae, molestiae! Voluptas a eveniet, amet saepe delectus quo voluptatem! Voluptatum sint quisquam officiis veniam!</p>
        </article>
        <article class="column" id="col-2">
            <div class="column-header">Column 2</div>
            <p class="column-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nostrum nisi quae! Adipisci, praesentium amet in architecto magni voluptate. Distinctio repudiandae excepturi quod! Ullam soluta, doloribus ex eius. Laboriosam dolores ex, saepe fugit. Repellat laudantium omnis, provident suscipit accusantium ullam, ratione consequuntur nostrum consectetur voluptate optio minima modi nobis, vitae repudiandae! Quasi deserunt in ratione veritatis voluptas, aut perspiciatis labore!</p>
            <div id="thumb-box">
                <figure class="thumbnail"></figure>
                <figure class="thumbnail"></figure>
            </div>
        </article>
        <article class="column" id="col-3">
            <div class="column-header">Column 3</div>
            <p class="column-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea consequatur incidunt enim magni consequuntur temporibus architecto officia tenetur saepe id ab esse asperiores, eum suscipit, neque ipsum veniam voluptate explicabo.</p>
        </article>
    </section>
    <footer></footer>
</body>
</html>

First let's begin by creating a small reset, I set all of the elements to have a box-sizing of border-box, which calculates the border and padding into an elements width and height. I remove the default margin, padding, and borders from the site, while also making sure its font-size is better compatible with the rem value, and make sure the html5 elements I am using are displayed properly for older browsers.

/* ==========================================================================
   GLOBAL AND RESET STYLES
   ========================================================================== */

/* Global Styles
   ========================================================================== */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box;
}

/* HTML and Body Styles
   ========================================================================== */
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size  : 62.5%;
}

body {
    border    : 0;
    margin    : 0;
    padding   : 0;
    background: lightGray;
}

/* HTML5 Semantic Styles
   ========================================================================== */
article, 
section, 
header, 
footer {
    display: block;
}

Next I focus on my layout elements, starting with the header and footer. I set their positioning to absolute, so that I can place the header at the top of the page and the footer at the bottom of the page. I make their widths 100% of the page and then add some aesthetic fluff.

/* ==========================================================================
   LAYOUT STYLES
   ========================================================================== */ 

/* Header and Footer Styles
   ========================================================================== */
header, footer {
    background: slateGray;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.8);
    color     : lavender;
    height    : 80px;
    position  : absolute;
    width     : 100%;
}

header {
    left: 0;
    top : 0;
}

footer {
    bottom: 0;
    left  : 0;
}

Now I begin styling the columns, I first begin setting up the default styles for all columns, setting their height, font-size, margins, and making sure they float left. I also add some color and box-shadow for further aesthetic fluff.

/* Column Styles
   ========================================================================== */
.column {
    background   : rgba(255, 255, 255, 1);
    border-radius: 3px 3px 0 0;
    box-shadow   : 0 0 3px rgba(0, 0, 0, 0.4);
    float        : left;
    font-size    : 1.8rem;
    height       : 400px;
    margin       : 2%;
    margin-top   : 100px;
    text-align   : center;
}

Next I begin work on the column widths, we gotta do a bit of math here, so bear with it. We have three columns so I figure I will have two columns at 21% and one column at 46% and give them a margin of 2%, this makes the columns take up 100% of the page width, and have equal margins. (21 * 2 = 42% + 46% = 88%) (2% * 6 = 12% + 88 = 100%)

#col-1, #col-3 {
    width: 21%;
}

#col-2 {
    width: 46%;
}

I now start working on the elements withing the columns, starting with the header, I simply make it span 100% of the columns width, give it some aesthetic fluff, and some font size.

.column-header {
    background-color: rgba(30, 30, 30, 1);
    border-radius   : 3px 3px 0 0;
    height          : 10%;
    width           : 100%;
    text-align      : center;
    color           : white;
    font-size       : 2.3rem;
    padding-top     : 3px;
}

Finally I use some relative positioning to set the position of a thumbnail box, about 50% to left of its current position, I give the thumbnails some background color, a width a height, float them to the left, and WALLA!!! A 3 column layout!!! Without the added aesthetic fluff and comments this is would less than 100 lines of css!

What you need to know about positioning, absolute and relative. Is how they affect the flow of its element. An absolutely positioned item, is relative to the top left of the page itself, and will not make items wrap around it, thus making it overlap other elements if you let it. Relative positioning is relative to the element above it (if their are more than one element in a container) or its containing element.

I recommend using absolute positioning for elements that are not within other elements, and using relative positioning for elements that are within other elements. Hopefully this long, long reply helps out.

EDIT: Here is what the layout looks like.

Edit2: Updated the link it should work now.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Robin Behroozi,

Do you have a working link that I can take a look at? It's tough to tell what the issue is without seeing the layout. :)

Thanks!

Hi Guil,

I saved a copy on Codepen. Here's the link… http://codepen.io/rb75/pen/vxrqe The footer doesn't go to the bottom of the page.

The "final" CSS in the Project Files seems to use a different layout method, so it's not much use to you to analyze. However, the "start" CSS code from the next video's Project Files seems to be what you're looking for. I took the liberty of pasting it here.

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

Your workspace is currently unavailable

Edit: why the downvote, I was letting you know the link you provided, was not available

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

From my own experience as a web developer, it is better to create column layouts using floats, they are easier to control in my opinion, you would use something like relative and absolute positioning to control the position of things like specific images, small layout boxes, control animations, and occasionally you can use a fixed position to control something like a menu that will always stay at the top of the page.

Hi Dane,

Thank you for your explanation about how to use positioning and floats to make a multi-column page. I really appreciate it.

I think I understand how to make a multi-column page with floats. I just made one to show you how I do it…it's really basic. I just wanted to find a way of doing it without floats, so that if I needed to, I'd be able to make one just using absolute and relative positioning.

/************************
BLOCKS OF CONTENT
************************/

.main-header{
  background:rgba(60, 100, 160, 1);
  color:white;
  padding:25px;
}

.primary-content{
  background:rgba(100, 60, 30, 1);
  color:white;
}

.secondary-content{
  background:rgba(60, 200, 100, 1);
  color:white;

}

.extra-content{
  background:rgba(210, 150, 130, 1);
  color:white;

}

.main-footer{
  background:rgba(100, 100, 100, 1);
  color:white;
  padding:25px;
  box-sizing:border-box;
}

/************************
APPLY TO ALL COLUMNS
************************/

.col{
  width:30%;
  padding:25px;
  float:left;
  box-sizing:border-box;

  padding-bottom:9999px;
  margin-bottom:-9999px

}

/************************
FIRST COLUMN
************************/

.primary-content{
  width:40%;

}

/************************
BOX CONTAINING COLUMNS
************************/

.content-row{
  overflow:hidden;

}

/************************
CLEARFIX
************************/

.clearfix{
  content: " ";
  display:table;
  clear:both;

}

Whoops, I pasted the code twice...

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

Because I do not have the time to rewrite my css to go for a pure positioning layout style. Here is an article that explains it probably much better than I every could.

Dane, I appreciate all your help, however, these answers and examples are not helping me. Thanks.

You're the one having problem understanding…I said I wanted NO FLOATS!!! Don't give me solutions that have floats in them. I'm leaving this conversation. I suggest you ANSWER THE QUESTIONS, not give people random information they don't want.