CODEWITHSUNDEEP
htmlcss
caramba
caramba

Reputation: 22480

clearing a float left not working

can someone please tell me what I am doing wrong here. I've tried to write the clear:both; also inside the floated elements but nothing seems to work.

I would like those small orange boxes inside the green border and not like this (see image).

enter image description here

Fiddle here and code:

<style type="text/css">
    .wrap {
        border:solid 2px green;
    }
    .wrap div {
        margin: 0 0 0 10px;
        padding: 10px;
        text-align: center;
        width: 67px;
        float:left;
    }
    .wrap div span {
        display:block;
        background-color:orange;
        margin:2px;
    }
    .clear {
        clear:both;
    }
</style>


<div class="wrap">
    <div>
        <span>xx</span>
        <span>xx</span>
        <span>xx</span>
    </div>
    <div>
        <span>yy</span>
        <span>yy</span>
        <span>yy</span>
    </div>
    <div>
        <span>zz</span>
        <span>zz</span>
        <span>zz</span>
    </div>
    <div class="clear"></div>
</div>

Upvotes: 1

Views: 408

Answers (6)

Kilian Stinson
Kilian Stinson

Reputation: 2394

Updated Fiddle

You're floating the <div class="clear">. That's why it does not work.

Try this selector for the floating divs instead so it does not match the clearing div: 

.wrap div:not(.clear) {
    margin: 0 0 0 10px;
    padding: 10px;
    text-align: center;
    width: 67px;
    float:left;
}

Another way of solving this, is to add float: none to your clearing class:

.clear {
    clear: both;
    float: none !important;
}

Upvotes: 2

edonbajrami
edonbajrami

Reputation: 2206

Add float:left; on the .wrap div Demo

Upvotes: 1

graham
graham

Reputation: 946

Alternatively use

.wrap {
    border: solid 2px green;
    overflow: hidden;
}

and remove the <div class="clear"></div>

All of the other answers are perfectly fine too. Enjoy learning about floats!

Upvotes: 0

codingrose
codingrose

Reputation: 15699

It is happening because .wrap does not have any height.

Add

overflow:hidden;

to .wrap. It will give height to it.

Updated fiddle here.

Upvotes: 1

Green Wizard
Green Wizard

Reputation: 3657

.wrap {
        border:solid 2px green;
        overflow:hidden;
    }

This should be in your css.

Upvotes: 0

BeNdErR
BeNdErR

Reputation: 17929

add

display: inline-block;

to your wrap container css

Fiddle: http://jsfiddle.net/Pv6m2/1/

Upvotes: 4

Related Questions