CODEWITHSUNDEEP
htmlcss
Vladyslav Kurkotov
Vladyslav Kurkotov

Reputation: 505

How to clear float only in curent div?

I have the followin g HTML:

<div class="wrapper">
    <div class="left-block">
        <p>
            some text
        </p>
    </div>
    <div class="right-block">
        <p>
           some text
        </p>
        <div class="some-block">654</div>
        <div class="some-block">132</div>
        <div class="some-block">987</div>
        <div class="clear"></div>
        <div class="regular-block">10002</div>
    </div>
</div>

blocks with class left-block and some-block have property float:left This looks like http://jsfiddle.net/5k5v67jj/ block with class clear has clear:left;

How can I make block regular-block to like on this screenshot:

enter image description here

Upvotes: 2

Views: 90

Answers (2)

Alohci
Alohci

Reputation: 82976

You have to contain the float and the clear in a block formatting context. To set up such a context, a common practice is to use overflow:auto or overflow:hidden. You'd add this to the styling of the div with the "right-block" class.

See http://jsfiddle.net/5k5v67jj/1/

Upvotes: 1

Rhumborl
Rhumborl

Reputation: 16609

I would change .some-block from float:left; to display:inline;. That way, a standard div like .regular-block will automatically show underneath and you don't need a clear between them.

Then you can put the clear div at the bottom to fix the block heights:

.wrapper{
    border: 1px solid brown;
}
.left-block{
    float:left;
    width:100px;
    padding:5px;
    border: 1px solid red;
}
.right-block{
    margin-left: 112px;
    border: 1px solid green;    
    padding:5px;
    padding-bottom:0;
}
.some-block{
    display:inline;
    border: 1px solid yellow;  
}
.regular-block{
    margin-top:10px;
    border: 1px solid violet;  
}
.clear{
    clear:left;
}
<div class="wrapper">
    <div class="left-block">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, lorem dapibus tristique rhoncus, justo erat volutpat erat, in malesuada enim libero quis metus. Nunc tristique maximus efficitur. Sed nec dolor ut quam consequat molestie id quis justo. 
        </p>
    </div>
    <div class="right-block">
        <p>
            Nunc a lectus enim. Quisque sit amet iaculis turpis, a auctor tortor. Mauris aliquet sapien non odio tempor, auctor gravida nunc commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum eu tellus vel volutpat. Cras sed neque egestas, ullamcorper purus id, viverra odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et malesuada est, et bibendum lectus. 
        </p>
        <div class="some-block">654</div>
        <div class="some-block">132</div>
        <div class="some-block">987</div>
        <div class="regular-block">10002</div>
        <div class="clear"></div>
    </div>
</div

Upvotes: 0

Related Questions