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

SeHyun Choi
SeHyun Choi
3,441 Points
Posted by SeHyun Choi
SeHyun Choi
3,441 Points

Float pushes my column down

Hi guys. I tried to make a website that starts out with mobile sites and at 762px it becomes 2 column and at 1026px it becomes 4 column.

But at certain width the fourth column gets pushed down and it looks really ugly. Can you help me find the solution for this please?

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Practice</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="sticky-footer">
    <div 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>   


    </div><!--end of .main-header-->




    <div class="banner">
        <img class="banner-image" src="img/city-logo.svg" alt="city picture">
        <h2>The Best City</h2>
        <p>The best drinks and eats in the best city ever.</p>
    </div><!--end of .banner-->




    <div class="bottom-container clearfix">

        <div class="first-col col">
            <h3>First</h3>
            <img src="img/treats.svg" alt="picture of treats">
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
        </div><!--end of .first-col-->

        <div class="second-col col">
            <h3>Second</h3>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
        </div><!--end of .second-col-->

        <div class="third-col col">
            <h3>Third</h3>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
        </div><!--end of .third-col-->

        <div class="fourth-col col">
            <h3>Fourth</h3>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <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 dragee chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
        </div><!--end of .fourth-col-->

    </div><!--end of .bottom-container-->
</div><!--end of .sticky-footer-->


    <div class="main-footer">
        <span>&copy; 2018 Residents of the Best City Ever.</span>
    </div><!--end of .main-footer-->

</body>
</html>

CSS CODE

/********************* Selector **********************/

* {
    box-sizing:border-box;
}


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

img {
    max-width:100%;

}












/****************** Class Selector ********************/

.main-header {
    text-align:center;

}

.name {
    margin:0;
}

.name a {
    color:navy;
}

.main-nav a {
    color:#3acec2;

}

.name a, .main-nav a {
    font-size:19px;
    display:block;
    padding:1em;
}


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

.banner-image {
    width:250px;

}

.bottom-container {
    width:95%;
    margin:40px auto;

}

.first-col {
    background-color:#a2aec1;
}

.second-col {
    background-color:#b0e5c6;

}

.third-col {
    background-color:#e0c7ac;

}

.fourth-col {
    background-color:#e5c0ed;

}

.col {
    padding:10px;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}

.main-footer {
    background-color:rgb(9,58,88);
    color:#fff;
    text-align:center;
    padding:2em;
}

.sticky-footer {
    min-height:calc(100vh - 82px);

}




/************************* Pseudo Class ****************************/


a:link {
    text-decoration:none;

}

a:visited {



}

a:hover {


}

a:active {

}

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

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


@media (min-width:600px) {

    .main-nav li {

        display:inline-block;
    }


    .col {
        width:48%;
        margin-left:1%;
        margin-right:1%;
        float:left;

    }       





}




@media (min-width:1026px) {

    .name {
        float:left;
    }


    .main-nav {
        float:right;
    }

    .bottom-container {
        width:98%;

    }

    .col {
        width:23%;

    }


}
SeHyun Choi
SeHyun Choi
3,441 Points
SeHyun Choi
SeHyun Choi
3,441 Points

I'm trying to do this without flexbox.

1 Answer

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

SeHyun Choi Iv'e tested this up to 1440px screen and can't see it dropping down.

Not entirely sure why you're using Floats for layout when Flexbox has great support for browsers and make's layouts like this a breeze :-)