How can I clear my float?

[chris_bcn]

HI,

can you take a look at : http://www.geocities.com/clbasey/floatclear.html

I need the first box to expand with the content - this works fine in IE. I assumed it was a clearing the float problem, but I don't seem to be able to resolve. I'm sure it something elementary but I can see the wood for trees due to looming deadline panic. (obviously the graphical elements will make it look a touch prettier!)

Cheers

[Wedgy]

This may be a dumb question, but do you know about this:

< br clear="all" >

Instead of < br > or < br / >
the above extra line ensures that what follows clears the previous
(usually align="left" style) graphic or table. Hope this helps.

Also, using something like align = LEFT makes objects line up horizontally if they are too narrow to span across the area. I don't know if these points relate to your problem, but this is what I have discovered in trying to get
things to align right. When all else fails, I have used

position: absolute; Left: 100px; Top: 20px; (a lot!).

You can use percentages here (Left: 20%; Top: 50% ) etc. ,but you have to check what happens in both browsers. I found firefox misbehaves a lot!

[mwinter]

< br clear="all" >

The clear attribute has been deprecated in favour of the clear CSS property, which offers more flexibility anyway. In that case, the value is both, not all. However, as the OP suspects, this isn't a float problem at all.

I have used

position: absolute; Left: 100px; Top: 20px; (a lot!).

Absolute positioning should be quite infrequently used. It can easily lead to fragile layouts that break horribly at larger font sizes.

You can use percentages here (Left: 20%; Top: 50% ) etc. ,but you have to check what happens in both browsers. I found firefox misbehaves a lot!

Compared to what? IE? In almost every instance, you'll find that it's the other way around. IE might be doing what you want, but not what it should.


To the OP: Your problem here is that you've set an explicit height. As the overflow property is set to visible (the default), the larger content spills out of the container because you won't let it expand. IE's implementation of the height property is broken. It acts like the min-height property, which is what you should be using.

Unfortunately, IE's poor CSS support means that it doesn't support min-height except through it's height bug, so a hack is necessary. You can use any 'show only to IE' method you like.

.indexBody {
  min-height: 140px;
}
/* Show only to IE: */
* html .indexBody {
  height: 140px;
}

Mike

[Wedgy]

wow, excellent post: (mwinter)
I am going to experiment with your suggestions too.

[achtungbaby]

Another way to clear your floats without additional markups is to use this:

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

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

You'd add the "clearfix" class to your containing float. You can read more about it here: http://positioniseverything.net/easyclearing.html

[Wedgy]

Wow that was an amazing link. Thanks!