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

Posted by troy beckett
troy beckett
12,035 Points

position elements effects layout

I have a have a div with two divs inside that I have position absolute. Positioning these div absolute has meant my footer has moved up. I think I understand why but don't know how to solve it. heres my code below:

html code:

<div class="first">
  <div class="second"></div>
  <div class="third"></div>
</div>

<footer></footer>

css code:

html, body {
height: 100%;
}

.first {
width: 100%;
height: 100%;
position: relative;
}

.second {
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
}

.third {
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
}

footer {
width: 100%;
}

all content in the div with class second is floated and I think this is what is causing my footer to wrap up. How do I solve this.

7 Answers

Jasen Carroll
Jasen Carroll
9,958 Points
Jasen Carroll
Jasen Carroll
9,958 Points

When I look at your code it shows the footer at the bottom. However, you have positioned both of the second and third div's on top of each other so there is a chance that the footer is being moved up as a result of that.

I placed your code in CodePen, which I've found is incredibly helpful for troubleshooting as it is all live. Here is a link: http://codepen.io/anon/pen/JdXWNr

Try removing the height of your first div and see if that works.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Is this the collapse that needs a clearfix?

Jasen Carroll
Jasen Carroll
9,958 Points
Jasen Carroll
Jasen Carroll
9,958 Points

No, that was my first thought as well but the clearfix is used when you are floating div's, not positioning them.

For example if you floated your second div to the left and your third div to the right, the first div would need the clearfix to prevent the footer from getting whacky.

troy beckett
troy beckett
12,035 Points

yeah thats what I thought. I've just took the position: absolute of the first div for now. Which has solved it. But it's interesting to get the answer.

The problem is basically this:

if you have a div with float content and try to position: absolute: how do you prevent elements below moving up. I'm guessing its giving everything heights and widths like the html and body but I was just checking in case someone else just knew the answer

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I should know the answer to this problem. I will try to figure it out.

troy beckett
troy beckett
12,035 Points

same here I'm gonna sit down and try and work it out later tonight because I should know this

Jasen Carroll
Jasen Carroll
9,958 Points
Jasen Carroll
Jasen Carroll
9,958 Points

I think the problem is that you are trying to use the absolute positioning. By definition using absolute removes it from the document flow, the same way using a float does.

It sounds like you're looking for a clearfix but for absolute positioning. Do you have to use absolute positioning? Could you use relative? Floats? Or even set the divs up as inline-blocks?

Check out this article: http://learn.shayhowe.com/html-css/positioning-content/

Jasen Carroll
Jasen Carroll
9,958 Points
Jasen Carroll
Jasen Carroll
9,958 Points

Also this: http://stackoverflow.com/questions/13193903/clearfix-with-absolute-positioned-elements

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I came across this solution that I really like. It places the footer at the bottom of the window when the content is less than the whole screen. It is not sticky, so it scrolls off the page with content when the content is longer than the page. It also saved some of my background image issues.

/************************************
Make Page Full Size
************************************/

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

The key is to make the body bottom margin the same as the footer height, in this case both 100px.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

This problem is addressed with the clearfix in this video:

https://teamtreehouse.com/library/css-layout-techniques/float-layout/floating-columns-and-images