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 Trevor Brandt
Trevor Brandt
1,520 Points

Floating <article>'s and having them clear nicely?

Hello!

I am working on this website: http://mutualmemoir.com/

I am trying to float articles and clear them nicely. Here's the code I have:

<!DOCTYPE html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Lato:100,900|Open+Sans' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <title>Mutual Memoir</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>MM</h1>
            <h2>Mutual Memoir</h2>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="welcome">
                <h1>Returning Shortly</h1>
                <p><strong>Mutual Memoir is relaunching with a brand new concept and theme. We will return by the end of the weekend. For now, some Lorem Ipsum...</strong></p>
                <p>Quem expetendis id despicationes, arbitror nulla amet quibusdam dolore o irure officia ullamco ubi nescius voluptatibus non incididunt. Aut velit fugiat si mandaremus sed fugiat pariatur consectetur. Summis firmissimum incurreret quis nostrud. E enim nescius, id nisi probant graviterque, tamen instituendarum expetendis enim cupidatat nam ullamco quo noster. Te malis efflorescere, tempor esse nulla nam summis. Ab dolor elit fore commodo. Nam incurreret coniunctione ubi laborum minim incurreret, in sunt multos noster probant ita quo eram enim multos ingeniis ubi deserunt aute mentitum tempor ubi iudicem an culpa, dolore praetermissum litteris irure pariatur est quibusdam ex litteris.</p>
            </section>

            <article>
                <h1>Article Title</h1>
                <h2>Posted by Trevor on Saturday, January 23rd, 2016 at 3:04 PM EST</h2>
                <p>Commodo enim deserunt arbitror, do si aute nulla sunt, voluptate duis deserunt, e eram irure nam admodum, te quae distinguantur et ita magna comprehenderit, mandaremus minim doctrina e quae incididunt a labore duis. An noster a sint ab hic voluptate nam litteris se laborum cillum velit et culpa ad quae ab deserunt, e se magna sunt malis hic doctrina te deserunt est laboris efflorescere ut possumus, cernantur in anim. Quibusdam veniam enim singulis sint, et aut elit probant in malis ullamco hic senserit est ex tamen fabulas consequat. Iis eram cillum an ingeniis, duis appellat excepteur. Labore transferrem possumus aliqua voluptate. Fugiat sed deserunt do irure, e multos consequat, excepteur in quamquam ubi minim litteris domesticarum te officia sint irure aut veniam, ne sunt voluptate arbitrantur eu vidisse culpa velit iis ipsum, do proident ne cupidatat.
                </p>

                <p>Quae possumus o enim enim. Appellat o voluptate hic labore commodo appellat. Iis e elit enim dolor, veniam despicationes possumus lorem officia, ingeniis amet aute laboris ipsum ne probant e litteris. Do illum tamen nam excepteur in hic duis duis quid fabulas, quid incididunt domesticarum ita quis ex hic velit fabulas. Anim non quibusdam ita et qui domesticarum, duis senserit quibusdam id nescius irure iudicem. Ab cillum cohaerescant. Non aliqua appellat litteris et velit ab consequat. Expetendis fore nostrud, nisi illustriora officia nisi pariatur.
                </p>
            </article>

            <article>
                <h1>Article Title</h1>
                <h2>Posted by Trevor on Saturday, January 23rd, 2016 at 3:04 PM EST</h2>
                <p>Commodo enim deserunt arbitror, do si aute nulla sunt, voluptate duis deserunt, e eram irure nam admodum, te quae distinguantur et ita magna comprehenderit, mandaremus minim doctrina e quae incididunt a labore duis. An noster a sint ab hic voluptate nam litteris se laborum cillum velit et culpa ad quae ab deserunt, e se magna sunt malis hic doctrina te deserunt est laboris efflorescere ut possumus, cernantur in anim. Quibusdam veniam enim singulis sint, et aut elit probant in malis ullamco hic senserit est ex tamen fabulas consequat. Iis eram cillum an ingeniis, duis appellat excepteur. Labore transferrem possumus aliqua voluptate. Fugiat sed deserunt do irure, e multos consequat, excepteur in quamquam ubi minim litteris domesticarum te officia sint irure aut veniam, ne sunt voluptate arbitrantur eu vidisse culpa velit iis ipsum, do proident ne cupidatat.
                </p>
            </article>

            <article>
                <h1>Article Title</h1>
                <h2>Posted by Trevor on Saturday, January 23rd, 2016 at 3:04 PM EST</h2>
                <p>Commodo enim deserunt arbitror, do si aute nulla sunt, voluptate duis deserunt, e eram irure nam admodum, te quae distinguantur et ita magna comprehenderit, mandaremus minim doctrina e quae incididunt a labore duis. An noster a sint ab hic voluptate nam litteris se laborum cillum velit et culpa ad quae ab deserunt, e se magna sunt malis hic doctrina te deserunt est laboris efflorescere ut possumus, cernantur in anim. Quibusdam veniam enim singulis sint, et aut elit probant in malis ullamco hic senserit est ex tamen fabulas consequat. Iis eram cillum an ingeniis, duis appellat excepteur. Labore transferrem possumus aliqua voluptate. Fugiat sed deserunt do irure, e multos consequat, excepteur in quamquam ubi minim litteris domesticarum te officia sint irure aut veniam, ne sunt voluptate arbitrantur eu vidisse culpa velit iis ipsum, do proident ne cupidatat.
                </p>
            </article>

            <article>
                <h1>Article Title</h1>
                <h2>Posted by Trevor on Saturday, January 23rd, 2016 at 3:04 PM EST</h2>
                <p>Commodo enim deserunt arbitror, do si aute nulla sunt, voluptate duis deserunt, e eram irure nam admodum, te quae distinguantur et ita magna comprehenderit, mandaremus minim doctrina e quae incididunt a labore duis. An noster a sint ab hic voluptate nam litteris se laborum cillum velit et culpa ad quae ab deserunt, e se magna sunt malis hic doctrina te deserunt est laboris efflorescere ut possumus, cernantur in anim. Quibusdam veniam enim singulis sint, et aut elit probant in malis ullamco hic senserit est ex tamen fabulas consequat. Iis eram cillum an ingeniis, duis appellat excepteur. Labore transferrem possumus aliqua voluptate. Fugiat sed deserunt do irure, e multos consequat, excepteur in quamquam ubi minim litteris domesticarum te officia sint irure aut veniam, ne sunt voluptate arbitrantur eu vidisse culpa velit iis ipsum, do proident ne cupidatat.
                </p>
            </article>
        </main>
        <footer>
            <p>&copy; 2016 Mutual Memoir.</p>
        </footer>
    </div>
</body>

</html>

/**************************************************
GENERAL
**************************************************/

body {
    font-family: 'Open Sans', sans-serif;
    background: url(../img/header.jpg) repeat center center fixed;
    background-size: cover;
}

#wrapper {
    margin: 0 auto;
    max-width: 940px;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

h1,
h2 {
    font-family: 'Lato', sans-serif;
}


/**************************************************
HEADING
**************************************************/

header {
    margin: 0;
    padding: 0;
    background: url(../img/header.jpg) center;
    background-size: cover;
}

header h1 {
    margin: 0;
    padding: 0;
    font-size: 5em;
    font-weight: 900;
    -webkit-text-stroke: 1px #b8466c;
    text-shadow: 3px 3px 0 #b8466c, -1px -1px 0 #b8466c, 1px -1px 0 #b8466c, -1px 1px 0 #b8466c, 1px 1px 0 #b8466c;
}

header h2 {
    margin: 0;
    padding: .5%;
    font-size: 2.5em;
    background: rgba(250, 178, 62, .8);
    -webkit-text-stroke: 1px #b8466c;
    text-shadow: 1.5px 1.5px 0 #b8466c, -.5px -.5px 0 #b8466c, .5px -.5px 0 #b8466c, -.5px .5px 0 #b8466c, .5px .5px 0 #b8466c;
}


/**************************************************
NAVIGATION
**************************************************/

nav {
    padding: .5%;
    text-align: center;
    background: #f26e41;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    padding-left: 2.5%;
    font-size: 1.25em;
}


/**************************************************
MAIN
**************************************************/

main {
    padding: 1% 0;
}


/**************************************************
WELCOME SECTION
**************************************************/

#welcome {
    margin: 2.5%;
    padding: 0;
}

#welcome h1 {
    margin: 0;
    padding: .25%;
    font-size: 1.75em;
    background: #8bc758;
}

#welcome p {
    margin: 1% 0 0;
    padding: 0 3%;
}


/**************************************************
ARTICLES
**************************************************/

article {
    margin: 2.5%;
    padding: 0;
}

article h1 {
    margin: 0;
    padding: .25%;
    font-size: 1.75em;
    background: #f26f72;
}

article h2 {
    margin: 0;
    padding: .25%;
    font-family: 'Open Sans', sans-serif;
    font-size: .75em;
    background: #f26f72;
}

article p {
    margin: 1% 0 0;
    padding: 0 3%;
    line-height: 180%;
}


/**************************************************
FOOTER
**************************************************/

footer {
    margin: 0;
    padding: 0;
    text-align: center;
}

footer p {
    margin: 0;
    padding: 0;
}


/**************************************************
COLORS
**************************************************/

a {
    color: black;
}

header h1,
header h2,
nav li a,
main,
#welcome h1,
article h1,
article h2 {
    color: white;
}

#wrapper,
#welcome,
#welcome p,
article,
article p,
footer {
    background: white;
}

p {
    color: black;
}

@media screen and (min-width: 480px) {

}

@media screen and (min-width: 660px) {

    nav {
        text-align: right;
    }

    article {
        width: 45%;
        float: left;
    }

    footer {
        clear: both;
    }
}

As you can see on http://mutualmemoir.com/, the articles float but as you get more than two, they do not clear nicely.

Thank you so much for your help!

Craig Watson
Craig Watson
27,930 Points

Hi Trevor,

Are you open to other layout options to get this going or would you like to stick with floats and find a work around ?

Craig

Trevor Brandt
Trevor Brandt
1,520 Points

Hi Craig!

I'm open to anything. :)

3 Answers

Craig Watson
Craig Watson
27,930 Points

No problem Trevor I am working on a solution here http://codepen.io/Craig-Watson/professor/vLdRYr/

You can watch and chat on there and we can work out a good solution :)

Should get you going quite quick I think

Craig

Craig Watson
Craig Watson
27,930 Points

Hi Trevor, here is the snap shot to fork https://w.trhou.se/nng1v99apn

Hope it goes well I am happy to help with anything if you have any more questions :)

Happy Coding Craig

Trevor Brandt
Trevor Brandt
1,520 Points
Trevor Brandt
Trevor Brandt
1,520 Points

Awesome! Watching now. Thanks so much!

Trevor Brandt
Trevor Brandt
1,520 Points
Trevor Brandt
Trevor Brandt
1,520 Points

Thanks Craig! You rock!