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
Saud Tauqeer
Courses Plus Student 8,099 PointsFloat issue. clear:both not working.
also is there anything wrong im doing in general? for some reason i feel like im doing it all wrong . like the div placements and stuff maybe its something minor and i just feel that way. anyhow i want to improve my css so any suggestion or anyone's help. ill appreciate it from my heart. its not totally ready but the basic is complete so .. yeah
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="saud">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="C:\Users\Saud Tauqeer\Desktop\k\css\styles.css">
<title>Resort</title>
</head>
<body>
<header class="main-header">
<p>you will have a wonderful time here with us.</p>
<h1>Karachi, Pakistan</h1>
</header>
<div class=" primary-content">
<p class="intro-1 t-border">Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.</p>
<a href="#more">Find out more!</a>
<div class="wildlife">
<h1>Check out all the wildlife</h1>
<p class="intro-2">As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and bald eagles.</p>
</div> <!-- WILDLIFE DIV ENDS HERE -->
</div> <!-- PRIMARY CONTENT ENDING HERE-->
<a class="callout" href="#website">See the wildlife</a>
<div class="secondary-content">
<div class="place-1">
<h3>Pack Accordinly.</h3>
<img src="img/resort.jpg">
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:</p>
<ol>
<li>Bring layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div> <!-- Place-1 ENDING DIV-->
<div class="place-2">
<h3>From Tents to Resorts</h3>
<img src="img/mtn-landscape.jpg">
<p>Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:</p>
<ol>
<li>Bring layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</div>
</div> <!-- SECONDARY CONTENT DIV ENDING -->
<footer class="main-footer">
<p>All rights reserved to the state of <a href="#">California.</a> </p>
<a href="#top">Back to the top</a>
</footer>
</body>
</html>
/* main Resets */
-
{
margin: 0; box-sizing: border-box; }
img {max-width: 100%; padding-top: 30px; padding-bottom: 30px;
} body {
color: #647696;
line-height: 1.4;
font-family: Arial , Helvetica , sans-serif;
}
/* MAIN STYLES */
.primary-content, .main-header , h1 , h2 , h3 {text-align: center;}
.t-border {border-top: 2px solid;}
ul , ol , li {
line-height: 1.7;
}
.main-header {height: 800px; background:
url('../img/mountains.jpg') center no-repeat;
background-size: cover;
padding-top: 150px;
text-transform: uppercase;
} .wildlife { height: 400px; background : url('../img/bear.jpg')center no-repeat ; background-size: cover; }
.intro {padding-left: 200px;}
/* LAYOUT */ .primary-content, .secondary-content { width: 75%; padding-top: 50px; padding-left: 150px; padding-right: 150px; }
.place-1, .place-2 { width: 45%; }
/FLOAT/ .place-1 {float: right;} .place-2 {float: left;}
.secondary-content {overflow: auto;}
Steven Parker
229,732 PointsIt's not clear what you're trying to accomplish. If this is for a course, it would help to provide a link to the course page you're working with.
Also, when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. 
Saud Tauqeer
Courses Plus Student 8,099 Pointshttps://teamtreehouse.com/library/clearing-floats This is the video steven
Steven Parker
229,732 PointsOK, but what is it you have done differently from the video, and what about seems to be a problem?
Saud Tauqeer
Courses Plus Student 8,099 PointsWhen float the footer comes up like it collapses and clear:both should fix it right? But nothing happens to the floated elements .place-one and .place-two. In the video the teacher used some pusdeo element called .group:after I couldnt understood it so i only used clearfix on the parent div of the elements i want to float
Steven Parker
229,732 Pointsif you can make a snapshot of your workspace and post the link to it here, it would allow the code to be easily tested plus it would resolve the formatting issues.
6 Answers
Steven Parker
229,732 PointsThe snapshot makes it easy to examine the issue (and is very compact in the question!).
So I see where the clear is used on the secondary-content div, but that happens before the two floated elements are added. To get clear of the floats, you need to apply the clear property to something after the floated items. An easy way is to put it directly on the footer:
footer { clear: both; }
The pseudo-element in the lesson is called a "clearfix". It's a way of causing the clear to occur at the end of an element instead of at the beginning. If you created a clearfix and added it to the secondary content, it would make sure it enclosed the floats completely and pushed any following elements down below them.
Pseudo-elements can be quite confusing at first, it might take some time to really grasp the concept. But they can be very useful (not just for a "clearfix"), so it's worth learning.
Saud Tauqeer
Courses Plus Student 8,099 Points <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="saud">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="C:\Users\Saud Tauqeer\Desktop\k\css\styles.css">
<title>Resort</title>
</head>
<body>
<header class="main-header">
<p>you will have a wonderful time here with us.</p>
<h1>Karachi, Pakistan</h1>
</header>
<div class=" primary-content">
<p class="intro-1 t-border">Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.</p>
<a href="#more">Find out more!</a>
<div class="wildlife">
<h1>Check out all the wildlife</h1>
<p class="intro-2">As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and bald eagles.</p>
</div> <!-- WILDLIFE DIV ENDS HERE -->
</div> <!-- PRIMARY CONTENT ENDING HERE-->
<a class="callout" href="#website">See the wildlife</a>
<div class="secondary-content">
<div class="place-1">
<h3>Pack Accordinly.</h3>
<img src="img/resort.jpg">
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:</p>
<ol>
<li>Bring layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div> <!-- Place-1 ENDING DIV-->
<div class="place-2">
<h3>From Tents to Resorts</h3>
<img src="img/mtn-landscape.jpg">
<p>Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:</p>
<ol>
<li>Bring layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</div>
</div> <!-- SECONDARY CONTENT DIV ENDING -->
<footer class="main-footer">
<p>All rights reserved to the state of <a href="#">California.</a> </p>
<a href="#top">Back to the top</a>
</footer>
</body>
</html>
```
```CSS
/* main Resets */
* {
margin: 0;
box-sizing: border-box;
}
img {max-width: 100%;
padding-top: 30px;
padding-bottom: 30px;
}
body {
color: #647696;
line-height: 1.4;
font-family: Arial , Helvetica , sans-serif;
}
/* MAIN STYLES */
.primary-content,
.main-header ,
h1 , h2 , h3
{text-align: center;}
.t-border {border-top: 2px solid;}
ul , ol , li {
line-height: 1.7;
}
.main-header {height: 800px;
background:
url('../img/mountains.jpg') center no-repeat;
background-size: cover;
padding-top: 150px;
text-transform: uppercase;
}
.wildlife {
height: 400px;
background : url('../img/bear.jpg')center no-repeat ;
background-size: cover;
}
.intro {padding-left: 200px;}
/* LAYOUT */
.primary-content,
.secondary-content {
width: 75%;
padding-top: 50px;
padding-left: 150px;
padding-right: 150px;
}
.place-1,
.place-2 {
width: 45%;
}
/*FLOAT*/
.place-1 {float: right;}
.place-2 {float: left;}
.secondary-content {clear:both;}
```
screenshot of elements with float and clear seems to be not working. : ( http://prntscr.com/jsd6el )
if i apply clear : both or not. The result is same. hence clearfix is not working. Only overflow seems to solve the problem.
why isn't clear : both working after floating elements.
elements before apply any kind of float or overflow : ( http://prntscr.com/jsd6vr )
elements with overflow property : (http://prntscr.com/jsd77f)
i have one more issue.
( http://prntscr.com/jsd87j )
i want to move this bear pic (the whole wildlife div including all the contents and the pic) to the right so it looks more centered according to the main header. Should i use margin or padding for that? why they are appearing to the left side by default. simply giving padding should be okay?
sorry for being such a pain and taking your time.
im trying hard on everything so i really appreciate you helping me out
Steven Parker
229,732 PointsPasting in code doesn't create the same opportunity for thorough analysis because resources such as images are missing, other factors such as project organization are not present, and it's easy to omit proper formatting for each kind of source code.
If you're not familiar with the process of creating a "snapshot" of your workspace, here's a video that explains it.
Saud Tauqeer
Courses Plus Student 8,099 Points
Saud Tauqeer
Courses Plus Student 8,099 PointsThanks a lot it worked. is my code other than this okay? and so to make a clearfix using pseudo-elements how should i include it in the code. From what you say i understand that you are saying that for a floated element to get clearfix has to applied on the parent div of those two floated elements :after the element has been floated. hence .secondary-div:after {clear:both}; ? in the video i couldnt understand the content: "" and table after that teacher wrote clear:both; Im really thankful that you put up that much time for me.
Steven Parker
229,732 PointsThe "content" property is required in a pseudo-element, even if it is just an empty string. The "display" is also set to a block style, "table" is a legacy from back when some browsers didn't operate consistently with just "block".
Saud Tauqeer
Courses Plus Student 8,099 PointsIf i clear elements just like clearing the footer method will i go fine by? Or the pseudo clearing method is a must to make a website properly work
Steven Parker
229,732 PointsThe way the clear is applied isn't important. What makes the cleafix popular is that you can apply it to the container without knowing what will come next, and without adding an extra element. If you don't mind adding another element, you can just put an empty div after the floated items and apply the clear property to that.
Saud Tauqeer
Courses Plus Student 8,099 PointsI cant find any more detailed video about the pseudo clearfix or article. Can u link me to somewhere where i can learn properly about the peuedo clearfix?
Steven Parker
229,732 PointsThere's plenty of articles about it around, like this one.
You can also find quite a number of videos about it on YouTube, but "the quality may vary".
Saud Tauqeer
Courses Plus Student 8,099 PointsThanks a ton steven thats all i could ask from you for now.
Steven Parker
229,732 PointsSaud Tauqeer — glad to help. You can mark the question solved by choosing a "best answer".
Happy coding!
Saud Tauqeer
Courses Plus Student 8,099 PointsSaud Tauqeer
Courses Plus Student 8,099 Pointsoverflow auto does works in a way but im more concerned that i dont have the basic understanding of the div usage and layout. can someone tell me that im doing fine or i need to start over?