Clearing Float

HTML & CSS
1

Hi all, I am close to completing the site I have been working on. However a number of pages have floated items and the only way I could find to clear the floats and for it to work how I want it was by adding

<div class=“clear”></div>

and the CSS being

.clear{
clear:both;
}

However am I right in thinking this is not good practice (if not why not)? If not how do I fix my site, I tried adding clear both to the div used below (footerborder) but that doesn’t work correctly. Here is a link to one of the pages that has the clear div Linky Linky.

Any help as always much appreciated

2

I use <br class=“clear” />

.clear { clear:both; }

It’s not bad practice at all as far as I’m aware :slight_smile:

3

Its better if you can avoid it, but sometimes there is no other way.

4

Hi,

Waht’s wrong with using overflow:hidden or the clearfix technique?

e.g.


#mainboxyellow {
    font-size: 105%;
    font-family: "trebuchet ms", helvetica, tahoma, serif;
    position: relative;
   [B] /*max-height: 100%; remove this*/[/B]
 [B]   overflow:hidden;[/B]
    width: 980px;
    padding: 0px 0px 0px 0px;
    margin: 60px 0 0 0;
    border: solid 10px #F7F9A5;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    behavior: url(pie.htc);
}

That works for me. :slight_smile:

The clearfix :after{etc…} see css faq) would also work so there is no need for the clearing div unless you have a bug in a certain browser that I didn’t notice. (It’s best not to use a break anyway because that introduces a big gap in some browsers.)

Remove the max-height:100% because if it indeed had something to base its height on then it would break your layout because you could never extend pass the initial height. I’m not sure what you were trying to achieve with that anyway. Perhaps you meant min-height:100% but again that would not work because there is no height for it to be based on and indeed if there was then you would get 100% from where the element was which is not likely what you meant.

5

Thanks to everyone who responded and particularly to Paul, that worked a treat.

To be honest I am still struggling with css and i don’t really know what either of those really are. I did try googling this problem first and came across the overflow:hidden suggestion or something like that (the author even attributed its design to you) but I wasn’t confident in what I was doing with it hence my post.

To be honest neither am I :). This is the thing I find hardest in trying to teach myself how to create websites, I have something I want to achieve, I google how to do it and find a solution but don’t fully understand whether it is the best/correct option.

Anyway I really appreciate help from somebody who is obviously well respected in the field. Just one final question am I right in thinking the reason the way I was previously doing it is wrong is because: 1) it involved extra unrequired code which 2) creates a larger file size which over a lot of pages for a large website 3) means the site will runner slower and take up more storage space than is actullay needed?

Anyway thanks again

6

Hi,

Yes that’s basically it:)

You never want to add extra html elements to a page when none is needed. They just get in the way and are there forever, add page weight and are of no semantic use to anyone. There are times when you have to add extra mark up (extra hooks for images) and then you have no choice but when there are alternatives then you should use them.

However with clearing there is usually a better method but there isn’t a one method for all purposes. The overflow:hidden method (IE6 needs haslayout instead) is no good when you need visible overflow because the overflow will get hidden.

The clearfix method is good but complicated for those that don’t understand it and a big chunk of markup.

You can float the parent but that changes the behaviour of the box and so isn’t always suitable.

You can use inline-block also but again that changes the behaviour.

All of the above create what is called a “block formatting context” and in this context an element will take care of its children and the parent will encompass its child floats.

The simplest for most cases is overflow:hidden but sometimes you want the overflow to be visible such as when you position something outside the box or drag something out the side with negative margins. If overflow:hidden was used these would most likely be cut off.

There are quite a few threads in the forum on floating and clearing so do a search if you need more info. The CSS faq also has a section on floats.