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 robinbehroozi
robinbehroozi
15,912 Points

Columns collapsing and other problems in CSS...

Hey,

I'm trying to build a website similar to the sample website in the positioning part of the CSS Layout Techniques. I'm trying to use relative and absolute positioning. Anyway, I'm having a few problems.

I gave the .content-row, the container that holds the 3 columns the position of relative and I gave the columns, .col inside the container the position of absolute and gave them each a width of 30%. Then I gave the first column, .primary-content a width of 40% and I placed each column with a left property according to the following code

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

/*
  code that doesn't work
  .wrapper, .content-row, .col{
  height:100%;
}
*/
.content-row{
  position:relative;
}

.col{
  position:absolute;
  width:30%;
  box-sizing:border-box;
}

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

.secondary-content{
  left:40%;
}

.extra-content{
  left:70%;
}

}

The first problem I'm having is that the footer is not going to the bottom of the page. The second problem is that, in the video, it says that I should give the container element, the .content-row a height of 100%. But that doesn't seem to do anything. Plus, when I give the columns, .col, a height of 100%, they collapse. I'm not sure what elements to give a height of 100%. If someone could help, I'd really appreciate it. Thanks.

2 Answers

Adam Bennett
Adam Bennett
7,663 Points
Adam Bennett
Adam Bennett
7,663 Points

Did you give all the parent elements of .content-row a height of 100% as well? IE, and I'm assuming that .content-row is within .wrapper, then you would have to give .wrapper a height of 100%, as well as body and HTML. Because all of your parent containers need a height of 100% specified when you use percentage.

robinbehroozi
robinbehroozi
15,912 Points

Hi Adam…

Yes I tried giving all the containers a height of 100%. I gave it to the columns (.col), the container for the columns (.content-row), then to the body and the html. It gave me weird results.

I tried building a similar site without using absolute or relative positioning and it worked fine. I simply used block and inline block, like in the following code. It was just that I was trying to build the site using absolute and relative positioning, just so that I would learn another way to build multi column sites. 

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

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

  width:50%;
}
.secondary-content{
  background:rgba(70, 150, 170, 1);
  color:white;

  width:50%;

}

.col{
  margin-right:-5px;
  vertical-align:top;
  display:inline-block;
  padding:25px;
  box-sizing:border-box;
  padding-bottom:9999px;
  margin-bottom:-9979px;


}

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


}
.content-row{
  overflow:hidden;
}
Adam Bennett
Adam Bennett
7,663 Points
Adam Bennett
Adam Bennett
7,663 Points

Well I just wrote this out and I'm getting it to work. Take a look at this. It's your CSS code, I just added a few things to help me follow what I was doing a bit better and I added the height: 100% to the body and html. I also was able to get the footer to the bottom of the page. Also I added the html file. I'm not sure if yours looks like this, but I made one so I could try out what you were doing.

This is the html code:

<!DOCTYPE html> <html>

<head>

    <title>absolute test 2</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel= "stylesheet" type= "text/css" href= "style.css" media= "screen">

</head>

<body>

    <div class= "wrapper">

        <div class= "content-row">

            <div class= "primary-content col">

                <p>This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space.</p>

            </div>

            <div class= "secondary-content col">

                <p>This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space.</p>

            </div>

            <div class= "extra-content col">

                <p>This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space. This is some more text to fill this space.</p>

            </div>

        </div>

    </div>

    <footer>

        <p>This is the footer.</p>

    </footer>

</body>

</html>

and this is the CSS code:

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

html { height: 100%; }

body { height: 100%; }

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

.content-row{ position: relative; }

.col{ background: green; position: absolute; box-sizing: border-box; padding: 5px 10px; width:30%; }

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

.secondary-content{ left: 40%; }

.extra-content{ left: 70%; }

footer { background: blue; } }