By StephanP on

Hi,

I am working on the development of a theme for a new community website.
I've based my theme developments upon the ZEN theme, which provides a clean and clear foundation.
No probs there.

In order to make clean separations between , and , and other places, I find it helpful to insert the odd
clear: both;
for which I also adapted the page.tpl.php here and there.

While doing so I noticed the use of the class "clear-block".

The CSS class ".clear-block" appears to be defined in the standard Drupal default.css.

.clear-block {
display:block;
}

So I assume it is a sort-of system class that is used internally by Drupal.

Looking at the CSS I understand the block part of its name.
But what is actually the purpose/use of the class "clear-block" in Drupal v5?
Where and why is "clear-block" used?

Kind regards,

Stephan

⋅ Categories: Drupal 5.x

Comments

drupalprojects’s picture

drupalprojects commented

Sometimes, you need to insert an emty block of this class after some relative positioned content.
This is described on http://www.complexspiral.com/publications/containing-floats/

StephanP’s picture

StephanP commented

I've given /modules/system/defaults.css a closer look.
And I have come to the conclusion that Drupal's clear-block exactly does a better job than what I was hoping to achieve with my own clear: both.
So I got rid of my home-brew clears.

A good description of the class clear-block can actually be found at Postion is everything

Sunshiney’s picture

Sunshiney commented

two clear-block selectors, one nearly atop the other ( line 50 and 42) in that /modules/system/defaults.css file? My understanding is that when there are two identical selectors, the latest selector cancels out the first. Therefore, the use of the first clear-block selectors is is meaningless.

Anybody have a comment?

Sunshiney’s picture

Sunshiney commented

It is a css error and I over-rode it in my style.css

Jeff Burnz’s picture

Jeff Burnz commented

No, it is not a css error, its how it works - its resetting the display declaration to block to override the previously declared inline-block for IE-mac.

@nwwoman - partially correct, however entire declaration blocks do not get rendered "useless", CSS is far more granular than that! Only the specific declarations within the block are overridden, this is called the cascade - http://reference.sitepoint.com/css/cascade

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
nirad’s picture

nirad commented

Is it a bug that's only in the latest (6.12) release of Drupal? I have two clear block classes being displayed with the basic content types, which pushes my sidebars to the bottom of the page. I'm hesistant to modify defaults.css.

-Nirad

zack85’s picture

zack85 commented

Can someone explain this -

I have code like this

<div class="views-row clear-block">......</div>
<div class="views-row clear-block">......</div>
<div class="views-row clear-block">......</div>

And it works fine. However if I delete clear-block from the class and I then add 'display:block' .views-row in my css file, leaving me with code like this

<div class="views-row">......</div>
<div class="views-row">......</div>
<div class="views-row">......</div>

My content gets all messed up because the clearing doesn't take effect. Even though I have simply moved the display:block code from the clear-block class, which I removed, to the views-row class. Can some explain why this happens?

remydenton’s picture

remydenton commented

I too would love to know why this is. My solution has always been to add an extra template file just to add the "clear-block" class to each row, but it would be so much cleaner to do via css.

Jeff Burnz’s picture

Jeff Burnz commented

You can use a css only clearing method:

.selector {overflow: hidden;}

Its that simple, but beware, if you have content you want to overflow the element (such as a drop menu), then this is not good...

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.