CSS CSS Layout Basics CSS Layout Project Introducing the Project

Can't seem to get clearfix to work, maybe it isn't even appropriate here. Footer is eating entire page.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Best City Guide</title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body>

<header class="main-header clearfix">
    <h1 class="name"><a href="#">Best City Guide</a></h1>
    <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
    </ul>
</header><!--/.main-header-->   

<div class="banner clearfix">
    <img class="logo" src="img/city-logo.svg" alt="City">
    <h1 class="headline">The Best City</h1>
    <span class="tagline">The best drinks and eats in the best city ever.</span>
</div><!--/.banner-->

<div class="secondary col clearfix">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
</div><!--/.secondary-->

<div class="primary col clearfix">
    <h2>Great food</h2>
    <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
</div><!--/.primary-->

<div class="tertiary col clearfix">
    <h2>How to get here</h2>
    <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
    <p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.</p>
    <p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
</div><!--/.tertiary--> 

<footer class="main-footer clearfix">
    <span>&copy;2015 Residents of The Best City Ever.</span>
</footer>

</body> </html>

/* If you get stuck, feel free to watch the follow-up videos where I'll show you one solution */

/* ================================= Base Element Styles ==================================== */

  • { box-sizing: border-box; }

body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }

p { font-size: .95em; margin-bottom: 1.8em; }

h2, h3, a { color: #093a58; }

h2, h3 { margin-top: 0; }

a { text-decoration: none; }

img { max-width: 100%; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.col h2 { text-align:center; }

.col { width: 95%; margin: auto; padding-top: 30px; }

.name { font-size: 1.25em; text-align: center; }

.main-nav { padding-bottom: 10px; }

.main-nav li { text-align: center; padding: 5px; }

.name a, .main-nav a { text-align: center; }

.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }

.main-nav a:hover { color: #093a58; }

/* ---- Layout Containers ---- */

.banner { color: #fff; background: #3acec2; text-align:center; }

.main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; text-align:center; }

.feat-img { width: 80%; display: block; margin: auto; }

/* ---- Page Elements ---- */

.logo { width: 190px; padding-top: 20px; }

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

.name { padding-left: 50px; float:left; }

.main-nav { float:right; padding-top: 20px; padding-right: 50px; }

.main-nav li { text-align:left; display: inline-block; }

.banner { padding-bottom: 20px; }

.col { float: left; }

.secondary { width: 38%; }

.primary { width: 58%; }

/* ---- Float clearfix ---- */

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

}

1 Answer

You should add clearfix class to the container div. Add container div around those 3 columns. You should also consider adding one more container around content in main header. You do not need clearfix on each column. Let me know how it goes. I have just finished that project

Ah man, you got it.

Thank you!