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 Ben Taylor
Ben Taylor
902 Points

CSS Positioning Problem

Hey guys,

I've run across a problem which I think may also be contributing to my sticky footer problems I'm having.. and I feel it may have something to do with the position attribute..

Here's my Code: http://codepen.io/anon/pen/ljsgo/

As you'll see, I've put in some random text under the standard box div, but you'll see the standard box div doesn't clear, does anyone know what the bug with this is?

Many thanks!

Ben

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I'm not sure if you've noticed this but your text is actually underneath the top left corner of your standard box. You might see a little black mark on your rounded corner. This is the beginning of your random text. In fact, if you give your standard box a left positioning of about 30px then you'll see your text uncovered.

I'm not sure if your goal was to have the text display below the standard box but clearing works with floated elements. Also, for future reference, you have a 'clear' class but you don't have a rule for it in your css. There's no styles set for the "clear" class as far as I can tell.

To my knowledge, clearing doesn't have any effect on absolutely positioned elements.

Your standard box has absolute position and so it is taken out of the document flow. Other elements will not respect it's boundaries. Your random text is placed on the page where it would be as if you hadn't included the standard box at all.

I hope that clears up some things for you. Let me know if you have any more questions about it.

Ben Taylor
Ben Taylor
902 Points

Hi Jason,

Thanks! It was because it was absolutely positioned and not relatively :)

Fixed now!