CODEWITHSUNDEEP
htmlcsscss-float
ADP_X
ADP_X

Reputation: 333

CSS Float elements

I guess this may have been asked a lot of times, but I've searched accross the forum and haven't find the answer for this case.

I've some divs "container" and some divs "item" all of them floated elements, and I want each "container" below the previous one.

I know I could achieve that without using floats on the containers. But I thought that using :after and clear: would be enough.

Why this doesn't work?

My code:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./style2.css">
</head>
<body>
    <header></header>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

</body>
</html>

My CSS:

* {
    margin: 0;
    padding: 0;
}

header {

    width: 100%;
    min-height: 25px;
    background-color: #444;
    position: fixed;
    overflow: auto;
}

.container {
    float: left;
    padding: 10px;
    margin: 10px;
}

.container:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.item {
    min-width: 50px;
    min-height: 50px;
    float: left;
    background-color: lightblue;
    border: 1px solid red;
    margin: 5px;
}

Thank you

Upvotes: 0

Views: 53

Answers (2)

goerwin
goerwin

Reputation: 1241

You can use the clearfix approach by adding the .clearfix class to your .container divs:

.clearfix:before,

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

.clearfix:after{
    clear: both;
}

<div class="container clearfix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

With this approach, you don't need to float: left your .container, and also, Clearfix it's going to help you each time a div has floated children by making it's height variable according to its children.

Another approach would be adding clear: left to your .container but I don't recommended it since it would be an specific approach solution.

Upvotes: 0

j08691
j08691

Reputation: 207861

Just add clear:left to your .container rules

.container {
    clear:left;
    float: left;
    padding: 10px;
    margin: 10px;
}

jsFiddle example

Upvotes: 2

Related Questions