Could someone please help me with CSS positioning?

Question

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


}

Answer 1 · 2014-07-08T16:52:49Z

July 8, 2014 4:52pm

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.

Answer 2 · 2014-07-08T15:36:55Z

July 8, 2014 3:36pm

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!

Answer 3 · 2014-07-23T06:15:10Z

July 23, 2014 6:15am

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.

Answer 4 · 2014-07-05T19:30:30Z

July 5, 2014 7:30pm

Your workspace is currently unavailable

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

Answer 5 · 2014-07-08T15:39:57Z

July 8, 2014 3:39pm

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.

Answer 6 · 2014-07-08T20:11:40Z

July 8, 2014 8:11pm

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.

Answer 7 · 2014-07-09T17:53:13Z

July 9, 2014 5:53pm

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.

Answer 8 · 2014-07-09T17:00:40Z

July 9, 2014 5:00pm

What are you still having problems understanding?

Welcome to the Treehouse Community

Looking to learn something new?

robinbehroozi

robinbehroozi

Could someone please help me with CSS positioning?

8 Answers

Dane Parchment

Dane Parchment

Guil Hernandez

Guil Hernandez

robinbehroozi

robinbehroozi

seanrobinson

seanrobinson

Dane Parchment

Dane Parchment

Dane Parchment

Dane Parchment

robinbehroozi

robinbehroozi

robinbehroozi

robinbehroozi

Dane Parchment

Dane Parchment

robinbehroozi

robinbehroozi

robinbehroozi

robinbehroozi

Dane Parchment

Dane Parchment