Fixing float container height problems

By Kevin in Uncategorized on November 7 2007

I’m sure many of us have experienced a container element going haywire when it contains floated elements. Since the floated elements aren’t part of the normal flow, they don’t contribute to the ‘height’ of the container element, causing quite a bit of layout frustration. When I recently encountered this problem, I tried handling it with {clear:both} rules, but didn’t like the idea of adding elements specifically to correct display problems.

Enter clearfix.css, which has saved me a from a good headache or two already:

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}

Link this stylesheet on your page, and include the ‘clearfix’ class to any element that includes floated elements.

Stylish - CNN Adblock

By Kevin in Stylish on September 27 2007

This Stylish style should get rid of most of the ad elements on CNN.com. What about this is better than AdBlock you ask? Well, nothing. You should have both! AdBlock will kill most of the ads on a site, and leave huge fixed size divs behind to laugh at you. This style doesn’t remove every single ad element on the entire site, but it does a pretty good job with most of them. There are a few fun ones like this:
<div class="cnnPad9Top">
</div>
<div class="cnnPad9Top">
</div>
<div class="cnnPad9Top">
    <div class="cnnWCBox">
       <div class="cnnBoxHeader">
       </div>
       <div class="cnnBoxContent">
          <div class="cnnWireAdLtgBox">
          </div>
       </div>
       <div class="cnnBoxFooter">
       </div>
    </div>
</div>
<div class="cnnPad9Top">
</div>
<div class="cnnPad9Top">
</div>

Very easy to kill the innermost cnnWireAdLtgBox div, not so easy to kill the parent class for that whole element (cnnPad9Top) without removing the entire right column of the page. I don’t think there’s a way for Stylish to get rid of them without a CSS parent selector, even with semi-supported CSS3 selectors.

Enjoy the style; there should be a CNNdark style up in the next few days!

Read More…