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

Amr Tag
Amr Tag
5,429 Points
Posted by Amr Tag
Amr Tag
5,429 Points

footer getting interrupting flow of page

I have been trying to exercise by trying to get the same design that Nick Pettit did in the front-ed web development track (the portfolio website) and I was doing nice till I hit a bump, the footer is right next to my image, so I tried to use theclear property and set the value to both but nothing happened. what did I do wrong on this css sheet (link to code included below, if the HTML is needed to better judge and assess the problem, tell me and I'll paste it too)

http://paste.ubuntu.com/7284432/

3 Answers

Matthew Craig
Matthew Craig
6,340 Points
Matthew Craig
Matthew Craig
6,340 Points

You might need to post the markup too just to be sure, but the problem may have something to do with the display value you set for the footer(you also set the display twice, which may make things a bit wonky). The footer displays "block" by default, so just delete the display property(ies) you set for the footer and see what happens. Hope this helps!

Amr Tag
Amr Tag
5,429 Points
Amr Tag
Amr Tag
5,429 Points

Worked like a charm, still some spacing issues but at least it's not in the middle of the page

Here is the mark-up: http://paste.ubuntu.com/7284577/

Thank you.

Matthew Craig
Matthew Craig
6,340 Points
Matthew Craig
Matthew Craig
6,340 Points

Block-level elements(i.e. footer) take up the entire width of the viewport, whereas inline-block elements are essentially rendered as inline elements, the only difference is that you can set the same properties to inline-block elements that you would set to block elements, such as set an explicit width or height.

No problem, happy to help!