Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

I'm trying to do this without flexbox.

1 Answer

Caroline Hagan
PLUS
Caroline Hagan
Courses Plus Student 12,453 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 :-)