Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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

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!