CODEWITHSUNDEEP
htmlcss
TheQ
TheQ

Reputation: 21

CSS Float Wont Work

I just started learning CSS, grids, and I'm having a problem .

Tthe code -

HTML -

<body>
    <div class="page-wrap">
        <h1>Grid</h1>
        <div class"grid">
            <div class="col col-2-3"> Test </div>
            <div class="col col-1-3"> Test </div>
         </div>
    </div>
</body>

And CSS

body {
    background-color: white;
}

.page-wrap {
    width: 80%;
    margin: 30px auto;
    background: grey;
}

.grid {
    overflow: hidden;

    .col {
        float: left:
    }
}

.col-2-3 {
    width: 66.66%;
    background: red;
}

.col-1-3 {
    width: 33.33%;
    background: blue;
}
}

How come float: left; is not being applied? Pause the video, this is how it should look, but it doesn't for me. It worked if I deleted the .col { float: left } part and applied float: left; to both .col-1-3 and .col-2-3. Other than that, I can;t find what I did wrong. I googled the clearfix "hack" but I didn't know how to apply it. Thanks In advance.

Upvotes: 0

Views: 174

Answers (5)

Justin
Justin

Reputation: 3397

Fix your float: left: to float: left;. As others have mentioned, fix your brakets.

Upvotes: 1

Mehdi Karamosly
Mehdi Karamosly

Reputation: 5428

First thing fix your css :

body {
    background-color: white;

}

 .page-wrap {
    width: 80%;
    margin: 30px auto;
    background: grey;
}

.grid {
    overflow: hidden;
}
.col {
    float: left; /* should be ; and not : */
}

.col-2-3 {
    width: 66.66%;
    background: red;

}

.col-1-3 {
    width: 33.33%;
    background: blue;
}

This is the link that works fine.

Upvotes: 0

user672118
user672118

Reputation:

You have some errors in your CSS.

  1. You are nesting a property inside another property.

    .grid {
    overflow: hidden;
    .col {
        float: left:
    }
}

    You need to change this so that .col is outside of .grid.

    .grid {
    overflow: hidden;
}
.col {
    float: left:
}

  2. You mistyped the closing semicolon on an attribute inside .col.

    float: left:

    Should be...

    float: left;

Upvotes: 0

Larsenal
Larsenal

Reputation: 51146

Basic float problem is this: float: left; instead of float: left:

Upvotes: 4

Paul Roub
Paul Roub

Reputation: 36438

There's a typo in the .col definition - float: left: should be float: left; (colon where a semicolon should be).

Upvotes: 1

Related Questions