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

Using Relative and Absolute positioning without Floats…

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 build 3 columns with widths of 40%, 30% and 30% inside a container, with a footer at the bottom. I'm trying to build it using relative and absolute positioning and without floats. Anyway, I'm having a few problems.

I gave the container that holds the 3 columns, .content-row 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 so that the 3 columns are beside each other.

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 me, I'd really appreciate it. Thanks.

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

}

1 Answer

Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points
Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points

Well for the footer problem, you don't seem to have an ID or Class assigned to it? Create one and try clear:both;

robinbehroozi
robinbehroozi
15,912 Points

Here is all the code…

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

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


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

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

}

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

}

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


}
/************************
NAVIGATION
************************/

.main-nav li{
  list-style-type:none;
  text-align:center;
  padding:10px 0 10px 0;
  background:rgba(30, 30, 100, 1);
  margin:5px 0 5px 0;

}

.main-nav{
  padding:0;
  margin:0;

}



a:visited, a:hover, a:link{
  color:white;
  text-decoration:none;

}

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

.main-logo{
  display:block;
  margin:0 auto;

}

/************************
STUFF FOR ALL COLUMNS
************************/

.col{
  padding:25px;

}

/************************
MEDIA QUERY
************************/

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


  /*.wrapper, .content-row{
  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%;

 }


}