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 trialrobinbehroozi
15,912 PointsUsing 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
6,672 PointsWell for the footer problem, you don't seem to have an ID or Class assigned to it? Create one and try clear:both;
robinbehroozi
15,912 Pointsrobinbehroozi
15,912 PointsHere is all the codeβ¦