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 Stephen Torres
Stephen Torres
Courses Plus Student 1,672 Points

Responsive CSS Issue

Hello all, I'm working on updating my website and making it truly responsive. I started with a blank Wordpress theme called bones and replaced the CSS with Boilerplate. I'm getting very close, but am now hung up on something I cannot get past.

I can't figure out how to have the black background section of the "Get In Touch" area stick to the bottom of the row. I can set specific pixel dimensions, but that is no good once it responds.

Here is a link to the site: http://stephen-torres.com/2013/

Any help would be greatly appreciated.

James Barnett
James Barnett
39,199 Points

You've got half a dozen stylesheets there, this is perfect case for a reduced test case on codepen

1 Answer

Keith Wyland
Keith Wyland
10,576 Points
Keith Wyland
Keith Wyland
10,576 Points

Ah, you've run into the classic "clearing floats" issue. It's a common one.

Your Submit button is floated right, but the <div> that surrounds the form is not floated, so the background doesn't continue.

First, read up on clearing floats: here and here. Definitely read those before moving on, floats and clearing are key layout concepts to understand fully to master CSS.

Ok, now that you're up to speed on the issue...

... in your particular case, you have a couple options:

1) Remove the float right from the .btn, and instead use a right text alignment on the .form

or

2) Use a "clearfix" method as described in the links I gave above. Here's another very common one. Actually, it's already in use in the bootstrap css with the class .clearfix

Stephen Torres
Stephen Torres
Courses Plus Student 1,672 Points

Thank you! This definitely helped! Now to finish the rest of the site.