CODEWITHSUNDEEP
htmlcsscss-float
Lucas
Lucas

Reputation: 3715

Clearing the floats

Recently I have been using the <div style="clear:both;"></div> after each div element with the float: left/right attribute.

Now I'm in progress with the loop for the news system and want some elements to be floated to the right side.

The question is: is that a good practise to use the clear: both; attribute after each float(s)? Is there any nice replacement for that in case if I shouldnt use that?

My current HTML for the news looks like this:

<div id="news">
     <div class="date" style="float: right;">06-05-2013</div>
     <div style="clear:both;"></div>

     <div class="text">[...]</div>

     <div id="comment-block" style="float: right;">Comment on this news</div>
     <div style="clear:both;"></div>
</div>

Upvotes: 0

Views: 872

Answers (6)

xec
xec

Reputation: 18024

Sometimes, clearing a float is indeed the right/best thing to do, but inline styles are (almost exclusively) bad, and css classes should be named after meaning rather than style. One of the strongest abilities of CSS is to separate content from presentation.

It is almost always better to contain a float rather than using clearing, and it is always better to contain rather than use inline styles or non-semantic class names.

There are several ways of containing floats, by creating a Block Formatting Context -- see https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context

More information and a quick tutorial at http://colinaarts.com/articles/float-containment/ (especially the "what not to do" section)

That said, all you need to achieve the same layout in the specific case of your question is to align the text, like @Juhana commented. Sample code;

HTML

<div id="news">
     <div class="date">06-05-2013</div>
     <div class="text">[...]</div>
     <div class="comment-block">Comment on this news</div>
</div>

CSS

.date,
.comment-block {
    text-align: right;
}

Upvotes: 0

ShibinRagh
ShibinRagh

Reputation: 6646

USE CLEARFIX Link here http://www.webtoolkit.info/css-clearfix.html

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}




    <div id="news">
    <div class="group clearfix">
        <div class="date" style="float: right;">06-05-2013</div>
    </div>
    <div class="text">[...]</div>
    <div class="group clearfix">
        <div id="comment-block" style="float: right;">Comment on this news</div>
    </div>
   </div>

Upvotes: 0

coma
coma

Reputation: 16649

Well, you can:

http://jsfiddle.net/qzbNr/6/

CSS

div.floats {
    padding: 10px;
    background-color: #eee;
    margin: 10px 0;
}

div.floats > div {
    float: left;
    width: 20px;
    height: 20px;
    background-color: #333;
}

div.floats > div + div {
    margin-left: 10px;
}

div.overflow-hidden {
    overflow: hidden;
}

div.box-sizing {
    width: 100%;
    box-sizing: border-box;
}

div.known-width {
    /* 200px - 2 * 10px of padding */
    width: 180px;
}

div.calc {
    width: calc(100% - 20px);
}

div.after-pseudo:after {
    content: "";
    display: block;
    clear: both;
}

div.clear {
    float: none !important;
    clear: both !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

HTML

<div class="floats overflow-hidden box-sizing">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden known-width">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden calc">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats after-pseudo">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats extra-markup">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

The overflow approach is messy, the trick is overflow hidden and defined width, you'll need to take care about the box model sizing and if you want something getting out like a tooltip or so, you'll be in troubles, but beside that is a classic, works pretty well.

The pseudo approach is the best IMHO, in fact I always have a .clear:after in my CSS.

The extra-markup approach is the worst since you need to add elements that don't mean anything and take care about other styles applying width !important or so.

Upvotes: 1

Tarun
Tarun

Reputation: 1898

In my opinion better solution is

HTML:

<div id="news">
    <div class="group">
        <div class="date" style="float: right;">06-05-2013</div>
    </div>
    <div class="text">[...]</div>
    <div class="group">
        <div id="comment-block" style="float: right;">Comment on this news</div>
    </div>
</div>

SCSS:

.group {
    &:before, &:after {
        content:"";
        display: table;
    }
    &:after {
        clear: both;
    }
    .lt_ie8 & {
        zoom: 1;
    }
}

Upvotes: 2

Turnerj
Turnerj

Reputation: 4278

Depends what you want your site to look like. Generally, clearing floats is quite important for the parent element to have it's height set correctly.

I will note however it may be more useful to you to use a class for clearing the elements over an inline-style.

Try something like this:

.clear
{
    clear:both;
}

And just use:

<div class="clear"></div>

This way, it allows you to perform or tweak any other styling you want for your clearing divs without manually having to edit the inline style to each one.

Upvotes: 0

ebolyen
ebolyen

Reputation: 966

Ultimately it depends on what you are trying to accomplish.

If you have some nesting of relatively positioned elements, and you want some inner children to be positioned on the left or right without affecting other children, then a float and immediate clear is one of the saner ways to accomplish this.

Other ways might be to use position absolute, or margins and a fixed width. But neither of these is ultimately as flexible as just asking the browser to put it on the right and then render inline with a clear.

Upvotes: 1

Related Questions