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 Sayfuddin Achmad
Sayfuddin Achmad
4,813 Points

float layout

hii everyone , there are know this challenge , i can't do this task ,,,, .huhuhu ,,,,:( Let's start by floating main-logo and the main-nav list items left. / Complete the challenge by writing CSS below / ''' / Float Styles ================================ */

/* Float Clearfix ================================ */

.group:after { content: " "; display: table; clear: both; } '''

6 Answers

Jacob Miller
Jacob Miller
12,466 Points

This code is the clearfix:

.group:after {
    content: " ";
    display: table;
    clear: both;
}

So all you need to do to add the clearfix to the header element is go into the html file, and add the class "group" to the main-header element, like the code below. You can add as many classes as you like to an element by separating them with a space.

<header class="main-header group">
hani munshi
hani munshi
3,801 Points
hani munshi
hani munshi
3,801 Points

<div class="extra col"> <h3>Extra Content</h3> <p>Filet mignon turkey flank doner strip steak. Frankfurter ham hock turkey, venison sirloin pig chuck shank capicola hamburger doner spare ribs boudin.</p> </div>

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

Select the logo and nav list items in css using their class names, and add the property float: left; See the code below:

.main-logo, .main-nav li {
    float: left;
}
Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

In the same way that you added the "group" class to the <header>, add the class "col" the the div with the class "extra" in the html file. Then add an opening and closing h3 tag inside that div, as well as an opening and closing p tag. If you're really not understanding the code challenges, I would recommend going back and watching the video again.

Sayfuddin Achmad
Sayfuddin Achmad
4,813 Points

hehe ,,, ok jacob thanks so much for you'r help ,,,, :D

Jacob Miller
Jacob Miller
12,466 Points

No problem. :)

Sayfuddin Achmad
Sayfuddin Achmad
4,813 Points
Sayfuddin Achmad
Sayfuddin Achmad
4,813 Points

How about this Jacob It looks like we need a clearfix in the header. Give the main-header element the class we created for clearing floats. "' /* Float Styles ================================ / .main-logo, .main-nav li { float: left; } / Float Clearfix ================================ */ .group:after { content: " "; display: table; clear: both; } "'

Sayfuddin Achmad
Sayfuddin Achmad
4,813 Points
Sayfuddin Achmad
Sayfuddin Achmad
4,813 Points

and next

Let's make the extra div on line 28 a new column by giving it the col class. Then, create your own content inside the column using an h3 heading followed by a p. ?