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 KB234 years 18 weeks ago
Last edited by Caroline Schnapp about 4 years ago.

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

| | | | | | | |

35347 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.

Mon, 2012-09-17 03:52 — Fly by night (not verified)

wonderful

Honestly, I was actually looking at this at the book store but i was not able to find it. hmm I don't know if it's already available here. i date asia||chnlove review

Mon, 2013-03-11 02:45 — cheap essay writing services (not verified)

Most university, college and

Most university, college and high school students have benefited from cheap essay writing services having a coach at some point in their lives, either as a member of sports team, or as a participant in an individual sport.

Wed, 2013-03-27 10:02 — shagor (not verified)

good

I've tried this application and a few tips that you provide on this page. In my opinion, this application is quite right for my computer to have a faster connection.
ticketing companies

Mon, 2013-04-01 06:58 — devesh (not verified)

message

termite To create a such kind of article is really amazing,I daily read your blogs and give my announcement for that here this article is too great and so entertaining.

Thu, 2013-04-25 06:08 — Fly by night (not verified)

serwis laptopów

There is no need for downloading any unique programming on the PC to play this diversion on the web, getalternative-treatments each of the one ought to have is Internet association. health-alternative-therapies and searching alternatives of Google Chrome, Mozilla Firefox or Internet Explorer. get alternative treatments A different unique headline of Health connected is the discount go on wagers. health alternative therapies which is between 95-97 rate and reward. Most gigantic wins in club are recorded on amusements play on health.

Sat, 2012-11-24 00:16 — warner12 (not verified)

great blog

american poker online spielen || chip runner online spielen You done certain good points there. I did a search on the subject and found nearly all persons will agree with your blog.

Mon, 2013-01-14 05:17 — Bikes in Pakistan (not verified)

Great Post

Thanks for this post. I believe that HR is better than span always. I love this post it is very informative.

Fri, 2013-05-03 07:58 — MAHAK (not verified)

I recently found the

I recently found the application well dictated and then quickly logical. http://www.usajobstoday.us/ I must personally we appreciate the time you devote to create the application. I’m sure very gratified in addition to lose time waiting for your blog post.

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.

Wed, 2008-08-13 01:49 — Fly by night (not verified)

Cool

Very cool. Drupal rules!

Mon, 2012-09-17 09:34 — Fly by night (not verified)

very interesting post.this

very interesting post.this is my first time visit here.i found so mmany interesting stuff in your blog especially its discussion..thanks for the post!
cliquez ici

Thu, 2012-10-18 06:09 — VaniaMols (not verified)

Fatherly solve problems that

Fatherly solve problems that arise when we are doing the programming is not an easy thing to do. Therefore there is no harm if we renew our knowledge about it so that we can more easily overcome these problems. lakeway tx dentist

Tue, 2012-10-30 01:36 — MandaBrown (not verified)

In developing software or a

In developing software or a blog we often find problems. But it is, can make our knowledge evolve to be better than ever. Therefore, if we find a problem in developing a blog, it's good if we are not easy to despair.
cheap homecoming dresses

Tue, 2012-11-27 01:05 — Fly by night (not verified)

fddf

novoline spiele online ||
novoline tipps
I simply stumbled upon your website and wanted to say that I have really enjoyed reading your blog post
A team that realizes that there is very little difference in talent 1-10 and that for them to succeed the starters should be playing very little more than the bench.

Thu, 2012-11-29 23:51 — Fly by night (not verified)

Popular package hip skirt is

Popular package hip skirt is to show their particular good & items .Leopard print elements are used ,will give girls charming flavor .There are Strapless equipped, small dew fragrant shoulder is feminine .sizzling hot für pc ||
slizzing hot

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

Sun, 2012-10-07 23:56 — WendyHosty (not verified)

Application drupal is quite

Application drupal is quite widely used by computer users and from experience they have tried to respond as if they say positive about this application. In my opinion, this could be one of the apps that I can try as well. Breast Augmentation Houston

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, 2011-09-19 00:01 — Bumsen (not verified)

CSS EASY

My Idea

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


*{
padding:0;
margin:0;
}

Tue, 2013-01-22 21:55 — Komar (not verified)

Nice post dude ,... keep the

Nice post dude ,... keep the good work going by continue blogging new and entertaining posts. djarum black cigarettes

Mon, 2012-05-21 02:54 — EdoLaw (not verified)

Unfortunately the

Unfortunately the application and this code can not be applied in internet explorer, when I use the browser. But I will download another browser like mozilla and opera, I hope this application can be applied in the browser. Randeep Grewal

Wed, 2013-01-09 22:54 — Muleso (not verified)

Very useful article for me,

Very useful article for me, there is more information I have is very important. Thank you! diet sehat

Thu, 2012-05-24 06:44 — SEO (not verified)

I've tried a few tips that

I've tried a few tips that you share on this page. But why every time I enter the last code I always had a computer error? Is this error when I enter the code or my computer's problem?

Fri, 2012-05-25 02:54 — best dating (not verified)

I am not very proficient in

I am not very proficient in making a program for computers. In my opinion, too many codes that I did not understand before, so I often make mistakes when applying the codes on my computer.

Tue, 2012-05-29 00:35 — Nokia mobile prices (not verified)

Useful sharing

Excellent and decent post. I have found much informative, what I was exactly searching for. Thanks for such post and please keep it up.

Wed, 2012-05-30 13:14 — Fly by night (not verified)

A well great post made by

A well great post made by author, Thanks for it, It's really nice information and worth to read.
sarah and other name

Sun, 2012-06-03 01:25 — sunlight sauna ratings (not verified)

I do not quite understand

I do not quite understand about this application. Honestly I have never not apply and very familiar with this application. But I will try to understand and enter the codes on this page.

Mon, 2012-06-04 03:09 — Avinazz (not verified)

Nice write-up

Generally I read more about publicly related topics and matters but never like this article. SO really I appreciate with you for your nice write-up. Great news Post. Always keeping up.
Himachal Packages | Himachal Tourism

Mon, 2012-06-04 18:37 — Bodybuilding Erfahrungen (not verified)

Super article

Super article, I enjoyed reading your blog. Thank you.

Sat, 2012-06-23 00:41 — vingino tassen (not verified)

To solve computer

To solve computer programming problems or things that make a computer do not work optimally, it takes some trial and research. In my opinion, it is quite challenging because we like you're in a situation to solve a puzzle.

Mon, 2012-06-25 02:03 — carlhendry (not verified)

There are many issues to be

There are many issues to be resolved because there are many people who had to cope with problems in his life so that life becomes normal again as before New Mexico contractors

Mon, 2012-07-02 08:07 — Botox bergen county NJ (not verified)

I'm not really an expert in

I'm not really an expert in combining existing codes to program a computer. In my opinion, combines some of the code, enough to make me dizzy and a little bored.

Fri, 2012-07-06 07:19 — AmeliaMins (not verified)

This application seems to do

This application seems to do pretty well, I've tried this application and a few tips that you provide on this page. In my opinion, this application is quite right for my computer to have a faster connection. personal health insurance california

Mon, 2012-07-09 09:09 — Gewaltprävention (not verified)

thank you

Hi! I just wanted to say thank you for sharing all this information with us. Keep up the great work. Bye.

Wed, 2012-07-11 08:25 — Druckerei (not verified)

Thanks for taking the time

Thanks for taking the time to discuss this, it is extremely helpful for me. I've read some excellent stuff here, great site.

Sat, 2012-07-14 15:18 — idsamaren (not verified)

A problem is will always

A problem is will always appear in one's life because there are many people who choose their own way to decide the issue that there is a consideration 服飾批發

Sun, 2012-07-22 21:41 — Branchenbuch (not verified)

really informative

Thanks for creating such a well written post which is really informative.

Mon, 2012-07-23 01:36 — how to invest in gold (not verified)

I've tried this application

I've tried this application and a few tips that you provide on this page. In my opinion, this application is quite right for my computer to have a faster connection.

Mon, 2012-07-23 23:24 — benbricks (not verified)

There are many people who

There are many people who choose to solve the problem by finding the plot beforehand. You do have to make a correct and proper solutions to get the best. glock magazines

Fri, 2012-07-27 02:27 — rendyklose (not verified)

Each issue is bound to work

Each issue is bound to work out even if the solution is a difficult thing to be sought and obtained. However, we must continue to strive diligently to get it. Hackett pas cher

Fri, 2012-07-27 07:25 — DalasMarcy (not verified)

I also often experience when

I also often experience when they wanted to break the impasse program code for the web that I have and it made ​​me stress. Therefore today I entrust it to someone more expert. injector

Sat, 2012-08-04 04:47 — JamesAndon (not verified)

To apply these codes do not

To apply these codes do not seem quite difficult because you already gave a pretty clear guidelines on this page. In my opinion, these codes can make your blog look and performance become more attractive. New Jersey Sewer backup cleanup

Sun, 2012-08-05 18:16 — dom rep (not verified)

informative post

Thank you for this informative post, I am glad I found this article via Google.

Mon, 2012-08-06 02:21 — JosuaMolls (not verified)

Apply the codes on this page

Apply the codes on this page does not seem difficult and can be done by self-taught. I am a layman in this field but I believe I can apply these codes because of the explanation is quite clear. apotik online

Wed, 2012-08-08 05:45 — PeronEvros (not verified)

There are many new video is

There are many new video is uploaded to the internet to sites that provide this service every day. We were able to see there are many people who are very dependent on the video. nimodipino

Thu, 2012-08-09 02:29 — julianekim (not verified)

Problem may be that there

Problem may be that there will indeed be one of the most difficult to solve if we really are in trouble the other and we're angry because there are many things that peeve. unlock blackberry

Tue, 2012-08-14 00:07 — recuperar arquivos (not verified)

To break the codes on this

To break the codes on this page is not easy and requires thought. In my opinion, it could be one thing that is quite difficult if we do not have a basis in this field.

Wed, 2012-08-15 01:43 — DadosIver (not verified)

I am interested to develop a

I am interested to develop a website that I have and make it a commercial website. But to meet that goal, I have to do a lot of good marketing to build a website for it so often visited by internet users. Montana health insurance quote

Wed, 2012-08-15 07:35 — renewforhealth.com (not verified)

To complete the existing

To complete the existing code in this application is quite complicated, so I read a variety of sources to be better in completing these codes and can immediately apply this application.

Wed, 2012-08-15 08:54 — Gesundheitsschuhe (not verified)

This article is really

This article is really useful and have been looking for some information on this topic. Great job and waiting for your next update.

Wed, 2012-08-15 14:37 — Opus 6 Series (not verified)

Opus 6 Series

Extremely fantastic page. As i only just happened at your current blog site and even recommended expressing we need very loved studying your own site blogposts.

Thu, 2012-08-16 04:58 — fredygoon (not verified)

A way that could be used to

A way that could be used to spend a holiday is to follow an activity that can add to your knowledge, such as learning how to set up a humor to others. chin bar

Mon, 2012-11-26 02:53 — Fly by night (not verified)

great

novoline forum ||
novoline für pc
I desired to leave a little comment to support you and want you a good continuation.

Fri, 2012-08-17 00:34 — ledlamp (not verified)

Develop an application like

Develop an application like this is good enough to do. I personally was always trying to expand this blog so that I have can still be accepted by the visitors.

Sat, 2012-08-18 02:15 — DelonLena (not verified)

Drupal application is

Drupal application is already quite popular among internet users. I personally use this application to develop a blog that I have in order to display the maximum performance. LetteringOnTheCheap.com

Sat, 2012-08-18 06:20 — AtlasJeris (not verified)

I am a little confused to

I am a little confused to apply the method of the rubber bands that you mentioned on this page. In my opinion, this is very new to me so I need some references for this application can be successfully applied. atlantaworkerscompensation.com

Sat, 2012-08-18 12:50 — Ursus16 (not verified)

Overflow of Elements

Had not thought about the idea of adding the class “clear-block” to the container element. The Rubber band' trick is an added bonus ;-) - very useful tips - thanks.

Sat, 2012-08-18 13:10 — Pensions John (not verified)

CSS - and adding clearing elements

Have tried to clear 'floats' using CSS. Found it helpful that you pointed out that rather than adding the clearing element directly to the markup I had to add it to the page dynamically. Had not figured that out! Also, helpful to know that it is necessary to indicate where the clearing element goes, and that this can be done by adding a class name. Thanks - really useful.

Sat, 2012-08-25 01:20 — CarlosMario (not verified)

It is not easy to solve

It is not easy to solve problems that exist in a computer program. I personally can not afford to do that because I do not have enough knowledge and experience about it. used car lots louisville

Sat, 2012-08-25 04:26 — GregNwokolo (not verified)

I do not quite understand

I do not quite understand the language of the computer as well as software that is commonly used to develop a blog. I think the programming language is a language that is difficult to understand. bali yoga surf retreat

Sat, 2012-08-25 16:10 — autovermietung winterthur mobility (not verified)

Problem

Has this problem re-appeard with more recent browser versions?

Thu, 2012-10-11 08:10 — LorenDasto (not verified)

Problems that often occur in

Problems that often occur in the blog is quite challenging for the blog owner, but not the least the owners of blogs that do not care about that. I'm personally not too mastered how to combine existing codes properly. Dan Lozano

Mon, 2012-08-27 04:23 — Motorschaden Ankauf (not verified)

understanding on this subject

I have no point to raise in against of what you have said. You possess lots of understanding on this subject.

Tue, 2012-08-28 04:13 — günstiges Wellnesshotel (not verified)

Perfectly written content

Perfectly written content, fantastic. I will come back later to read more of your articles, hope you keep up the good work.

Tue, 2012-09-04 03:57 — MariskaIkes (not verified)

A lot of the code that must

A lot of the code that must be understood in order to apply this application In my opinion, this is a pretty important thing to be learned when in reality it is not easy to do. infused olive oils

Tue, 2012-09-04 23:29 — Anchorage Web Design (not verified)

Anchorage Web Design

Solving a problem could be easy and could be difficult. It depends on the problem itself.
Anchorage Web Design

12next ›last »

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <css> <html> <javascript> <mysql> <php> <span> <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <css>, <html>, <javascript>, <mysql>, <php>, <rails>, <ruby>.

More information about formatting options

CAPTCHA
I have to wonder if you're a human spammer or a machine, or less likely someone who cares to leave his or her thoughts behind.