40 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

I have just released an article that looks at a new way to clear float containers.
http://www.csscreator.com/attributes/containedfloat.php

You no longer need to add a clearing element, such as a div or br set to clear both, in you markup.

I converted this site and removed all the clearing elements last weekend.

Tags:
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 44 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Float Containers

Hi Tony

All I can say is wow!

I wonder if it works for Safari too, i.e. does Safari support pseduo elements? I know it should, but it has had a patchy history with these (i.e. it is quite buggy). I have a page that breaks without the clearing div, so it will be interesting to try it.

The next one is an IE bug with pseudo elements. Read this to find out more:

http://www.maxgeek.com/ie6pebug/

Seems you have to have a space after the name and before the curly brace.

So maybe your code should be:

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

I see the holly hack includes a space.

Nice one, Tony.

Trevor

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi Trevor,
Thanks I thought you'd like it.

It works in Safari 1, that's the only version I could test it in.

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

Absolutely great! Nice work. Laughing out loud

Safari v1.2x works fine as well (as does Firefox Mac). IE5 Mac OS X, unfortunately not in this baby though Sad

If Trev can suggest some IE5 Mac hacks, I'll be happy to have a go asap. Wink

The next sentence is true. The previous sentence is false. Discuss...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi co2,
I did a browsercam screenshot of IE5.2 Mac and it seemed to contain the floats in all my test. I thought it must contain floated elements all the time.
Could you send me a screenshot of the forum and one of the test page.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 44 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Float Containers

Hi

If there are any IE 5.xMac problems, I would always look a the display:block first. I've no end of trouble with this setting. Specifically, you often have to re-declare display:inline after it in the next div. IE5.x Mac in standards mode is, well, quirky.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

Sorry for not getting back to you all earlier, been rushed off my feet (but still found time to help out on the forum Wink )

I originally thought it may have been my version of the code that buggered up IE5 OS X. But, I've just checked the example page on this site: http://www.csscreator.com/attributes/containedfloat.php

Unfortunately, the last two examples, one cleared (the first one), and one not clear (the final one), are both uncleared. Hence, not working in IE5 OS X.

I'll happily test and retest a fix, and will take on board your comments Trev... if only I can find the time! Shock I will hopefully try tomorrow day.

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 44 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Float Containers

co2 wrote:
I'll happily test and retest a fix, and will take on board your comments Trev... if only I can find the time! Shock I will hopefully try tomorrow day.

Hi co2

I'll do a bit of testing tomorrow.

was busy today (job interview, wow, I got it Laughing out loud Laughing out loud )
Must find some beer.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

Great news Treva! Congratulations!

I gather it's a developer job?

The next sentence is true. The previous sentence is false. Discuss...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Congratulations Trevor.
Thanks for the feedback co2.

I have just had an idea but without a mac have no way of testing or developing it.
Use the DOM Luke, or was that force :roll:
IE5 Mac has some support for the DOM and we may be able to simply write a function that inserts a clearing element only for IE5 Mac.
Something Like this:

 function clearcontainers(cId){  
   var clearElement =document.createElement("br"); 
   var container = document.getElementById(cId); 
   document.insertBefore(clearElment, container);
}

We would then just need to pass it the ids of the containers and set the BR's within that container to clear both.
We would also have to find a way to target only IE5 Mac.

What do you guy's think.

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

Hmm, would rather a CSS solution first. I'm hopeful that there is one amongst IE5 Mac's capabilities.

I'll be having a go sometime today. Wink

The next sentence is true. The previous sentence is false. Discuss...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi co2,
I would also prefer to find a CSS solution.
Using the DOM to fix one browser is better then using clearing elements in all browsers.
I'm sure I could find a solution if I had a Mac to test it on.

Try http://www.csscreator.com/attributes/tests/clearfloat2.html
number seven has a fix that should work as long as document.currentStyle is supported by IE5 Mac.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 44 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Float Containers

co2 wrote:
Great news Treva! Congratulations!

I gather it's a developer job?

Hi

What, someone pay me, a newbie to do development work? nah!

I am at heart a teacher, and so some lucky pupils in the cotswolds are going to have me as their ICT teacher next year!

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

Even better... drum CSS and standards into them whilst they're young! Wink

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 44 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Float Containers

co2 wrote:
Even better... drum CSS and standards into them whilst they're young! Wink

Hi

Actually, the new dfes standards guidelines for teaching recommend we simply cut open their craniums and pour the knowledge in :twisted:

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

Well, I've had a go in the time I've got (not much), and can't seem to get anywhere with it. Any suggestions? :?

The next sentence is true. The previous sentence is false. Discuss...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi co2,
Thanks for trying it out.
I have just updated the article with a script that works as far as I can test on Browsercam.
http://www.csscreator.com/attributes/containedfloat.php

Let me know if you experience different results.

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

I'm afraid it's still broke! Sad

Now you know why I deny IE5 Mac's existence! Wink

The next sentence is true. The previous sentence is false. Discuss...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi co2,
Is there any chance you had JavaScript disabled?
Or could I have made an error in my coding
try http://www.csscreator.com/attributes/tests/clearfloat2.html
the top one looks fine to me in IE5 Mac on browsercam.
http://www.browsercam.com/public.aspx?proj_id=65478

Tony

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Well I had another look at my code and I was still targeting a div on the other page :oops:

It should now work.

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float Containers

That did the trick! Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Thanks co2,
It's so hard to develop for a browser without direct access to it.

Now I've just got to work out how to add it to the rest of my site :?

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 10 years 25 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Float Containers

Quote:
Actually, the new dfes standards guidelines for teaching recommend we simply cut open their craniums and pour the knowledge in.

What's wrong with the good old 'funnel in the ear' method?
It's less messy, and you get less scarring too. Does take
longer tho...

http//www.positioniseverything.net/

hembeck
Offline
newbie
NJ
Last seen: 9 years 49 weeks ago
NJ
Joined: 2004-05-15
Posts: 6
Points: 0

Missing the technique I think

Hello all,

I've tried the technique described in the article on how to maintain a floated div within it's container, but I am not getting the result I had hoped for. I'm hoping someone here can help.

I'm trying to float right an image, and have it remain within it's container, and stay in line with the image on the left. The method described here does contain the image within the container, but it won't stay in line with the image on the left. Instead it is below the image on the left. You can see what I mean by going to this url:

http://www.headfirstconsulting.com/tests/css-float-issue.html

Any insight will be appreciated! Tongue

-Fernando

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi hembeck,
You need to float the first image left and then use the Holly Hack for it to work in IE.

Hope that helps

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 44 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Float Containers

Big John wrote:
Quote:
Actually, the new dfes standards guidelines for teaching recommend we simply cut open their craniums and pour the knowledge in.

What's wrong with the good old 'funnel in the ear' method?
It's less messy, and you get less scarring too. Does take
longer tho...

Hi John,

Long time no see.

Actually, the cranium method is more efficient, as we can sit them down and the mechanism simply drops from above. A bit Heath Robinson like, but effective :twisted:

Trevor

hembeck
Offline
newbie
NJ
Last seen: 9 years 49 weeks ago
NJ
Joined: 2004-05-15
Posts: 6
Points: 0

Float Containers

Tony wrote:
Hi hembeck,
You need to float the first image left and then use the Holly Hack for it to work in IE.

Hope that helps

Floating the first image helped solve the problem...Thanks a lot.

-Fernando

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 23 weeks 2 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

Float Containers

I occasionally get a 1px white space below the blue box in Firebird. I suspect it is a rounding error issue but would be interested in other's experience. BTW - I am most impressed - this is a super way to clean up the code.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

pepejeria
Offline
Regular
Munich
Last seen: 10 years 21 weeks ago
Munich
Joined: 2003-12-01
Posts: 45
Points: 0

Float Containers

I noticed that it also worked fine without the dot, only
content:"";

Tested this in Firefox and Netscape 7 (Moz 1.0.1), is there any browser where this will not work without the dot?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi pepejeria,
The method evolved over time.
In my initial testing, some of the earlier versions of Opera gave results that were inconsistent without something in the content.
Since then I stuck with a period in content, and as it is set to visibility hidden have seen no reason to remove it.
I can't seem to reproduce the behavior now in Opera so it may be safe to remove it
Test it out in as many browsers as you can.

zulaica
Offline
newbie
Last seen: 9 years 42 weeks ago
Joined: 2004-07-02
Posts: 4
Points: 0

Float Containers

first off, thanks for the hack. it works great.

one funny thing i noticed: the bottom border MUST be explicitly defined for this to work in mozilla. i've only tested this in firefox 0.9.1 so far, but i figure you may want to mention it in the write-up.

again, thanks for the hack. you're a life-saver! Laughing out loud

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi zulaica,
I'm still on Firefox 0.9 it clears correctly without any borders.
Have you got an example page we could look at?
There might be something else interfering with the results.

zulaica
Offline
newbie
Last seen: 9 years 42 weeks ago
Joined: 2004-07-02
Posts: 4
Points: 0

Float Containers

hey tony. thanks for your time.

http://pseudo-cyb.org/beano/border.html

http://pseudo-cyb.org/beano/no-border.html

the first one has the border declared using border: xxx. the second one has explicit border-left and border-right. using the more "generic" border: xxx is okay for this particular layout, but it'd be nice to not have to make further workarounds with other layouts should it become a problem.

those pages are still very much a work in progress if you look at them with ie. opera (7.51) displays no-border.html correctly. i have no idea about safari.

thanks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi zulaica,
I just had a quick look in Firefox using the edit CSS feature and put a period in the content and the problem disappeared. #container:after { content: "."; display: block; height: 0pt; clear: both; }
I knew there was a reason to keep that in. Cool

zulaica
Offline
newbie
Last seen: 9 years 42 weeks ago
Joined: 2004-07-02
Posts: 4
Points: 0

Float Containers

well, that sorta works. the problem is that there's no way to effectively "hide" the "." or keep it from displaying. i tried overflow: hidden, but that didn't work. then i tried visibility: hidden, but all that did was hide the "." and left the extra space. line-height: 0 helped a little. anything below font-size: 2px wouldn't help at all.

i think i'll just leave the bottom border there with content: "". thanks anyway! Laughing out loud

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi zulaica,
Have you tried using a negative margin?

zulaica
Offline
newbie
Last seen: 9 years 42 weeks ago
Joined: 2004-07-02
Posts: 4
Points: 0

Float Containers

thanks for the suggestion, tony. i think my particular layout requires modifications to your hack. nothing against the hack at all. on the contrary, i wouldn't have gotten this far without it. Smile

to get my code to work properly (that is, use border-left and border-right instead of border), i had to use a negative margin, explicit font size, and visibility set to hidden.

#container	{
	width: 700px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	border-left: 1px #BAB5AB solid;
	border-right: 1px #BAB5AB solid;
	background: #fff url('bg_links.gif') fixed;
	}

/* float hack -- not necessary for opera 7.51, but it doesn't kill it */
#container:after	{
	content: ".";
	display: block;
	height: 1;
	clear: both;
	visibility: hidden;
	font-size: 1ex;
	margin: -3ex;
	}
/* end */

it produces the same results as setting the entire border of the container, but uses up a little extra file size to do so. i guess variations on the same theme will be required depending on the layout.

heck, if i didn't want the content div centered, i could have just set the content div to float as well which would then wrap all floats contained inside... a nice trick if you use fluid layouts.

thanks again, tony. you're a life-saver and hair-saver and then some! Laughing out loud

Mr Bingo
Offline
newbie
York Uk
Last seen: 9 years 41 weeks ago
York Uk
Joined: 2004-07-13
Posts: 1
Points: 0

Not for me it didn't

As far as I can tell the Netscape 6.2 problem still remains with this method. I have spent most of the day trying to get this to work. Problem occurs if you want the parent DIV to expand with the enclosed DIV. It simply doesn't work.
Sure the content below moves out of the way but the parent DIV is still escaped. I don't want borders around my divs and without them the method fails.
Try this barely changed code to see what I mean in Netscape. Crying

code{white-space:pre; color:green; display:block; background-color:#FFFFFF; border:solid 1px #CCCCCC; padding-left:.5em; font-size:1.1em;}
.floatcontainer, .floatnotclear{background-color:#FFFFFF;}
.info{color:#0066FF;}

.float{
    width:6em; 
    height:6em; 
    float:left; 
    position:relative; 
    background-color:#006699;
    border:solid black 1px;
    }
.floatcontainer:after{
    content: "."; 
    display: block; 
    height: 0; 
    overflow:hidden;
    clear: both; 
    visibility:hidden;
    }
    
    /* Holly Hack Targets IE Win only \*/
    * html .floatcontainer {height: 1%;}
    /* End Holly Hack */
    
   /* for the DOM added div */
   .cb{clear:both; height:0; overflow:hidden;}
  
  .com{color:purple; margin-top:10px; }

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

Hi Mr Bingo,
I tested your style Netscape 6.2 , 7 and 7.2 they all behave the same without the border.
So in all of them the background of the floatcontainer won't extend to the edge of the floated element.
But the text after the floated element comes clearly after the floated element and not beside the float.

Hope that helps

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 23 weeks 2 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

Float Containers

I had been working on an example using the clearing technique and came across this interesting phenomenon (working in Firefox 1.Innocent

I had come up with this example which looks OK in Firefox. However if you go to the last CSS property that pads the content-containing divs and remove the padding - the problem of excessive margins under cleared elements appears. I think it is becoming clear that you need certain properties of either border or padding on the div following to keep the space problem from turning up.

If you have access to IE 5.5 you will notice that the two column floats contained in a clearing div are out of place (see attachment dodster_IE55). However if you add to the code:

  .clear {display: inline-block;
	position:relative;}
it will ensure that IE will play nice with divs containing floats when the only class being applied is the .clearfix (I've used .clear in my example)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

Float Containers

ClevaTreva, pointed out that firefox reserves space for the contents of the "after pseudo element" below the container under certain circumstances, unless you set the font-size to 0.
I have updated the article http://www.csscreator.com/attributes/containedfloat.php

Thanks Trevor.