Syndicate

Feed
Home

Rubber band and no-spilling contest

Tuesday, 12 Aug 2008 — Caroline Schnapp
Now that Firefox 3 and IE7 are out and raging (and IE8 available in beta), a new clearfix solution has received the seal of approval from the website positioniseverything.net. Caution: it may make you shake your head, blink slowly and say 'Whaa…?'. Read this old article and digg it. Let your clear-block class be changed to .clear-block { overflow: hidden; }
— Update

You may read the rest of my article, which was published on Wednesday, April 11th 2007. Here it comes: When you’re creating a theme for Drupal, you have two tricks at your disposal to deal with floats, each trick aimed at one particular float ‘problem’.

Anti-spilling agent

The first challenge you may encounter is to prevent ‘spilling’ of floated elements out of their container. You may want to force a container element to stretch out... to wrap around all floated elements it contains. Here’s what I am talking about :

At gun pointIf someone holds a gun to my head, maybe I will finish my first Drupal theme before the end of the month.

The method at your disposal to fix this problem is to add the class “clear-block” to the container element. The class is defined in modules/system/defaults.css. That’s ‘core’ CSS. It’s ready to use whenever you need it. And you’re done. You no longer need to worry about floated elements spilling out. The method used in defaults.css is inspired (or borrowed directly) from a solution proposed on the website Position is everything. It works in all commonly used browsers, even those less common ones. It requires no markup, but does involve 2 hacks. Here’s the same div with a “clear-block” applied :

At gun pointIf someone holds a gun to my head, maybe I will finish my first Drupal theme before the end of the month.

Here is the CSS for the “clear-block” class :

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

.clear-block {
  display: inline-block;
}

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

The :before and :after pseudo-elements, selector:before and selector:after, are used to insert generated content before or after an element’s content. These specific pseudo-elements are not supported in Internet Explorer 7 or below.

The rubber band

Second method is the “rubber-band” trick. You may apply that trick whenever you wish to (using a figure of speech) place a horizontal invisible line to keep elements that are in the markup that precedes, above ; and what comes after that markup, below. For that, you insert the following <span> element where you want your rubber band to be (imagine a rubber band tightly tied at both left and right ends) :

<span class="clear"></span>

However, if you do that, you have to define the clear class in your theme’s style.css file. That’s easy : copy and paste the CSS rule span.clear from garland’s style.css file to your theme’s stylesheet (your own style.css).

span.clear {
  display: block;
  clear: both;
  height: 1px;
  line-height: 0px;
  font-size: 0px;
  margin-bottom: -1px;
}

Now I may force the paragraph that follows the following spilling <div> to drop below my rubber band. I will place my rubber band, that is, my <span> element, between my spilling div and the next paragraph. Just watch me.

At gun pointIf someone holds a gun to my head, maybe I will finish my first Drupal theme before the end of the month.

See ? It’s that easy. Do a View Source in your browser. This paragraph (right here!) is not creeping up along the right end side of the image that is spilling out of its box. It’s held below an invisible line, kept under our “rubber band”.

Why are we using a <span> for our rubber band if we’re setting its CSS display property to “block” ? you may ask. Why not use a <div> instead ? We could. We may use whatever will give us valid XHTML, a span or a div. A span goes just about anywhere, while a div does not. For example, a paragraph can only contain inline elements in XHTML strict. So we’ll use a span in that paragraph, and make it a block in the CSS, using the CSS rule exactly as it is defined above. On the other hand, we cannot put any inline elements right under the <body> element. So, in that particular situation, we will use a <div> rubber band, if we require one. But in most other cases, a <span> will do.

Update [April 17th] : I just read rumors on the Net according to which a <div> rubber band in IE5 and IE6 can produce several nasty bugs in “certain conditions”.

Attached to this posting is a zip that contains two HTML files with a common stylesheet. Each document is a demonstration of a trick. If you’re not using Drupal, then download this demo, it contains all the CSS you will need to solve the problems described in this article.

AttachmentSizeHitsLast download
problems-with-float-fixed.zip33.78 KB2313 years 21 weeks ago
Last edited by Caroline Schnapp about 13 years ago.

One file is attached to this posting. Login or register to download this file.

| | | | | | | |

Login to post comments | 86633 reads

Comments

Wed, 2007-04-11 04:35 — elv (not verified)

HR

Whenever I need the "rubber-band" trick I use a HR instead of a span. It's a bit more oh-so-semantic and useful when people have disabled styles for some reason.

Wed, 2007-04-11 05:25 — Caroline Schnapp

A hr occupies space

A line occupies some space, so it “breaks” the layout. Even if I use this markup :

<hr class="clear" />

With that CSS rule :

hr.clear {
clear:both;
visibility:hidden;
padding:0;
margin:0;
line-height:0px;
}

The space used by that invisible line still occupies about 20px in height. Probably because margins are not collapsing on either sides (on top and below). The span occupies no space.

It's a bit more oh-so-semantic and useful when people have disabled styles for some reason.

How is it useful ? When the sylesheet is disabled, your layout falls apart. Having lines separating these sections that are stacked one on top of the other is not particularly useful.

Update [April 17th] : I just read a description of this method. When using the ruler rubber band, the markup is : <hr class="clear" />. And it relies on that CSS rule : hr.clear {display: block; clear: both; visibility: hidden; height: 0; border-width: 0; margin: 0; padding: 0;}. I did not test this.

Tue, 2008-08-12 23:32 — Caroline Schnapp

The book CSS Mastery mentions the overflow method

I missed it when I read the book, a long time ago. Here is an excerpt taken from page 41 of CSS Mastery: Advanced Web Standards Solutions, published in 2006 (the title of that section is Line boxes and clearing):

Applying an overflow property of hidden or auto will automatically clear any contained floats without the addition of extra markup. This method is not appropriate in all situations, since setting the box’s overflow property will affect how it behaves.

Lastly, some people have taken to clearing floats using CSS-generated content or JavaScript. The basic concept for both methods is the same. Rather than add a clearing element directly to the markup, you add it to the page dynamically. For both methods you need to indicate where the clearing element goes, and this is usually done with the addition of a class name:

<div class="news clear">
<img src="news-pic.jpg" />
<p>Some text</p>
</div>

Using the CSS method, you use the :after pseudo-class in combination with the content declaration to add new content at the end of the specified existing content. In this case I’m adding a full stop as it is a fairly small and unobtrusive character. You don’t want the new content to take up any vertical space or be displayed on the page, so you need to set height to 0 and visibility to hidden. Because cleared elements have space added to their top margin, the generated content needs to have its display property set to block.

Once this is done, you can then clear your generated content:

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

This method works in most modern browsers but fails in Internet Explorer 6 and below. Various workarounds are available, many of which are documented at www.positioniseverything.net/easyclearing.html. The most common of these involves using the Holly Hack (see chapter 8) to trick IE 5-6 into applying "Layout" (see chapter 9) and incorrectly clearing the floats.

.clear {
display: inline-block;
}
/* Holly Hack Targets IE Win only \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End Holly Hack */

However, due to its complexity this method may not be suitable for everybody.

Thu, 2008-09-25 15:20 — chris

2 different Examples.

Hello,
One site I used tag for clears instead of divs or spans. After diving head first into SEO, I thought it would be fun to use these instead of divs everywhere:

#id-of-div h5 {
clear:both;
height:1px;
padding:0px;
margin:0px;
text-indent:-1000em;
width:670px;
}
Site Name

It was fun to test based on Sematic Web. What I learned that you could have multiple instances of tags. I also used the tag but I found out from a SEO friend that the tag with the Site Title, should be the last thing the Search Bot reads.

I also then experimented with the overflow: auto approach and found a solution. The only issue I found is that when you increased the Font size in IE 6 (ctrl + scroll wheel), the scrollbars appear. I used to benchmark my css-xhtml for IE6 but in the last 6 months, too bad. When you do a fresh install of Windows XP, during the updates, it prompts to install IE7.

Other than that I like the overflow:auto approach. Less divs, more semantic and works in the 4 main browsers.
I would post the code for the overflow approach but I am saving this for a nice float tutorial for my site.
I will post a link when ready.

chris

Thu, 2008-09-25 15:57 — Caroline Schnapp

overflow:hidden

I also then experimented with the overflow: auto approach and found a solution. The only issue I found is that when you increased the Font size in IE 6 (ctrl + scroll wheel), the scrollbars appear.

Try overflow: hidden instead.

Fri, 2008-09-26 11:24 — chris

liquid layout...

The reason for the {overflow:auto}, is trying to keep a liquid layout.
It seems to work for most browsers except IE6, which the scroll bars appear. I guess I should have explained what the goal of the final expectation was.
The {overflow:hidden}, did work very well though.

Have a good one.
chris

Mon, 2008-09-29 12:36 — chris

spammers suck

Well I think you have an IP address to block.
F%$king spammers suck.
Here is the whois:

inetnum: 89.149.241.0 - 89.149.244.255
netname: NETDIRECT-NET
descr: netdirekt e.K.
remarks: INFRA-AW
country: DE
admin-c: WW200-RIPE
tech-c: SR614-RIPE
status: ASSIGNED PA
mnt-by: NETDIRECT-MNT
mnt-lower: NETDIRECT-MNT
mnt-routes: NETDIRECT-MNT
source: RIPE # Filtered

lame

ps: sorry to hear about your relationship crap.
Travelling clears the mind

Mon, 2012-09-10 06:53 — click here (not verified)

Whatever shape the look of a

Whatever shape the look of a website, it seems not too important to me. In my opinion, the content and quality of a website is the main thing that should be taken into consideration.

Wed, 2012-09-12 08:54 — Gratiskleinanzeigen (not verified)

really instructive!

I was looking at some of your posts on this website and I can say this website is really instructive! Keep publishing new articles.

Fri, 2012-09-28 08:19 — Karnevalskostüme 2013 (not verified)

I just couldn't leave your

I just couldn't leave your site without saying that I enjoyed the excellent details you provide on this site. Thanks for sharing.

Thu, 2012-10-04 07:23 — Liebesgedichte (not verified)

writing style

I have read quite a few articles on your website now, and I really like your writing style.