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

Zachary Truong
Zachary Truong
2,653 Points
Posted by Zachary Truong
Zachary Truong
2,653 Points

if I flow .article-content left, it will override .image-article's flow position.

For the practice of float workshop at https://teamtreehouse.com/library/the-solution-5

Guil demonstrated that we could set float left for both: .image-article and .article-content. However, it does not work. When I float left to both of them, the .article-content will override the position of the .image-article which .image-article should be the first item from the left.

If I set .article-content float to the right, it will display correctly as per instruction. Can someone help explain?

/* Float '.img-article' so that content flows around its right side. Apply a 20 pixel right margin.
*/ .image-article { float: left; }

/*
Float '.article-content' so that it's positioned next to '.img-article'. Adjust the width of '.article-content' so that both elements are laid out side by side. */ .article-content { float: left; width: 75%; }

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The instructions should work as shown in the video. You might have made some other changes to the CSS that are not shown here and causing what you see.

To make it possible for your issue to be exactly replicated, make a snapshot of your workspace while the problem is present and post the link to it here.

Zachary Truong
Zachary Truong
2,653 Points
Zachary Truong
Zachary Truong
2,653 Points

Hi Steven Parker , Thank you for bringing up the snapshot feature. I did not know about it. Here is a snapshot of my workspace: https://w.trhou.se/j4u2a57f3a

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The issue was actually visible in your sample above, but having the snapshot to test with made it easier to find.

The CSS rule for the image targets ".image-article", but the actual class of the element is ".img-article".

Also, the comments say to add a margin setting.

Zachary Truong
Zachary Truong
2,653 Points
Zachary Truong
Zachary Truong
2,653 Points

Hi Steven Parker , I really appreciate that you took the time to review the code. I could not believe that I missed something so basic. Thanks again.