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 treebunker bunker
treebunker bunker
5,492 Points

clearfix not working.

Hi everyone! im trying to practice css doing the css challenge from wikiversity and i have a problem with one collapsing margin and the clearfix not working to solve the issue. i want to give a top-margin to the element p inside the #footer, why the clearfix does not work? code bellow , thx for any help.

<!DOCTYPE html> <html> <head> <title>CSS Challenge 1</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="main.css">
</head> <body> <div id="wrap"> <div id="header"> <h1>Shakespear.net</h1> </div> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Writings</a></li> <li><a href="#">Sonnets</a></li> <li><a href="#">Life Story</a></li> <li><a href="#">About Shakespear.net</a></li> </ul> </div> <div id="sidebar"> <h2>Sonnet Index</h2> <ul> <li><a href="#">Sonnet #1</a></li> <li><a href="#">Sonnet #6</a></li> <li><a href="#">Sonnet #11</a></li> <li><a href="#">Sonnet #15</a></li> <li><a href="#">Sonnet #18</a></li> </ul> </div> <div id="content"> <h1>Shakespeare's Sonnet #18</h1> <p>This is one of the most famous of the sonnets. It is referenced in the film Dead Poets Society and gave names to the band The Darling Buds and the book and television series The Darling Buds of May. Read it and weep!</p> <ul> <li>Shall I compare thee to a summer's day?</li> <li>Thou art more lovely and more temperate:</li> <li>Rough winds do shake the darling buds of May,</li> <li>And summer's lease hath all too short a date:</li> </ul> </div> <div id="footer" class="clearfix"> <p class="copyright">See the <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets"> Shakespeare's sonnets</a> Wikipedia article for more information </p> </div> </div> </body> </html>

css



html, body, #wrap {
    height: 100%;
}
ul {
    margin: 0;
    padding: 0;
}
#wrap {
    max-width: 450px;
    margin: auto;
}

/************ header ************/

#header {
    background-color: #B5B67D;
    height: 16%;
}
#header h1{
    margin: 58px 34px 0;
    float: right;
    font-size: 21px;
}

/************ nav ************/

#nav {
    background-color: #689D59;
    min-height: 4%;
    border-bottom: 2px dashed white;
    box-sizing: border-box;
}

#nav li{
    display: inline-block;
    list-style: none;
    font-size: 10px;
    margin: 0 4px 0 14px;
}
#nav a{
    text-decoration: none;
}   

/************ sidebar ************/

#sidebar {
    float: right;
    background-color: #B5B67D;
    width: 23%;
  min-height: 70%;
}
#sidebar h2 {
    font-size: 8px;
    margin-left: 5px;
}
#sidebar li {
    font-size: 10px;
    margin-left: 20px;  
}

/************ content ************/ 

#content {
    float: right;
    background-color: #506449;
    width: 77%;
    min-height: 70%;
}
#content h1{
    font-size: 19px;
    margin: 18px 0 0 10px;  
}
#content p{
    font-size: 9px;
    margin: 10px
}
#content li{
    list-style: none;
    font-size: 12px;
    text-align: center;
}

/************ footer ************/

#footer {
    background-color: #689D59;
    min-height: 10%;
    clear: both;
  font-size: 12px;
}
#footer p{
  text-align: center;
    margin-top: not working;    
}

/************ clearfix************/

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

4 Answers

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

Try adding an extra ":" Like this

.clearfix::after

treebunker bunker
treebunker bunker
5,492 Points

Done that, and still collapsing.

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

Hm thats weird, in a video i was watching moments ago i noticed in the clearfix for content he places a space between the empty quotes: content: " "; Try that and see if the whitespace he inputs there affects anything.

treebunker bunker
treebunker bunker
5,492 Points

still collapsing mate, but thx for the suggestions!

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

Sorry about that mate. Really weird this is the clearfix i have and mine does the job?

.group::after {

    content: " ";
    display: table;
    clear: both;
}
treebunker bunker
treebunker bunker
5,492 Points

i think my problem is not with the syntax of the clearfix, must be somewhere else , i just cant find it.

LaToya Legemah
LaToya Legemah
12,600 Points

It seems like the margin top is working. When I look at it through the inspector the top margin for "p=class"copyright" " is starting above the content (above Shakespeare's Sonnet #18). When I set the margin-top to 351px with the #footer p, I can finally see the footer box begin to shift. All together the p tag is taking up 450 x 50 of space..

treebunker bunker
treebunker bunker
5,492 Points

yes, it is working, but it is collapsing outside the parent element, thats why i use the clearfix but something is preventing it to do its job, maybe is the clear: both, im going to take a look later to it, and hopefully come back with a solution.

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

If you check on stack overflow there's some things on people unable to margin-top on clear:both.

treebunker bunker
treebunker bunker
5,492 Points

yes i looked there, going to post the code too. thx.