how to use the clear for float?

Question

I tried to use a layout where each entry will contain a vote in left side and content in right side. So I used float:left for the vote which is .left and float:right for the content which is .right. But it doesn't work out.

I think its a clear fix problem. i tried clear:both for the content in this case it is .right but couldn't make it well. Because margin bottom for the each main entry are not sitting properly.

I think this is due to poor clear fix code.

Can anybody give a alternative to make the same kind of layout or what wrong am i doing here.

.entry {
    width:80%;
    border-bottom:2px solid black;
    margin-bottom:10px;

}
.left{
    float:left;
    background-color:blue;
    width:10%;
    clear:left;
}
.right{
    float:right;
    width:90%;

}

Here is the JSfiddle

score 2 · Accepted Answer · answered Dec 15 '13 at 16:50

2

I would add a div with the style clear:both; after all floating elements and before the end of the div containing these floating elements. In your case like this:

<div class="entry">
    <div class="left">vote</div>
    <div class="right">Contetnts</div>

    <div style="clear:both;"></div>

</div>

answered Dec 15 '13 at 16:50

display-name-is-missing

4,424
5
28
41

Thanks +1. how only one clear:both does this job? Could you explain plz @Daniel Lisik – rram Dec 15 '13 at 16:59
The code `clear:both` is like an universal solution. It's like "anti-float"-style for a div, making that element not having any other floating elements next to it nor on the left nor on the right side. Thus adding that style to a div after floating elements makes the div with `clear:both` like a solid box keeping the floating elements where they should be. Hope that helps! – display-name-is-missing Dec 15 '13 at 17:05
Thanks. I have one doubt, `clear:left` mean it will remove the extra space in left side , `clear:right` mean it will remove the extra space in right side and `clear:both` will clear both side extra space. Am i clear? @Daniel Lisik – rram Dec 15 '13 at 17:13
1

@rram Yeah you could put it that way. I personally would however call it 'making sure floating elements above won't become nested with elements beneath'. For a much deeper explanation (a very very good one, I believe) you can read the top answer to this post: http://stackoverflow.com/questions/12871710/why-clear-both-css – display-name-is-missing Dec 15 '13 at 17:17

score 1 · Answer 2 · answered Dec 15 '13 at 16:50

1

.entry {
    overflow: auto;
    width:80%;
    border-bottom:2px solid black;
    margin-bottom:10px;
}

http://jsfiddle.net/bFXpq/3/

answered Dec 15 '13 at 16:50

Adrift

58,167
12
92
90

Thanks +1. What overflow does here. @Adrift – rram Dec 15 '13 at 16:58

how to use the clear for float?

2 Answers2