How to overflow the item’s shadow?

[Andy Howells]

Oveflow: hidden; is a clearfix for the lazy.

Best bet is to use Nicolas Gallagher’s Clearfix;

.cf:before, .cf:after {

content:"";

display:table;

}



.cf:after {

clear:both;

}



/* For IE 6/7 (trigger hasLayout) */

.cf {

zoom:1;

}

[wolfcry911]

I take offense to that – why is it lazy to use a method from the specs?

[TheDoc]

Perhaps *lazy* isn’t the right word. It certainly leads to unforeseen issues.

[wolfcry911]

not if you’re aware of the limitations (which are few). I always recommend that people learn the multiple ways of containing or clearing floats so they may use what works best in a particular situation.

for the record, I’ve been creating stylesheets for a long time, and I can count on one hand the number of times I couldn’t use the overflow method for float containment.

[Andy Howells]

@wolfcry911 – can you point out in the specs (http://www.w3.org/TR/CSS21/visufx.html) where overlow:hidden; is for clearing?

It’s not. It’s for clipping contents, that is it’s purpose. OvHid was always a hack to clear – the least interfering method is actually using an additional div and clear: both; at the end of the content.

I think saying “lazy” was probably not the right word, it’s basically a quick fix rather than a thought out solution.

[AlirezaM]

The code overflow:hidden; is in core of flex-slider and I think it’s not good to change the core.

I think there is a better way to achieve shadows.

I removed the container div of slider (which is in 960gs and is 960px) but the slider floated to the left and I want it to be in center of page.

I even used margin:0 auto; to have it in center but it didn’t impress the slider.

[Paulie_D]

You cant use margin:0 auto; unless you set a width.

Try setting the width of the container div to 980px. That should give you enough room for a shadow on either side.

Alternatively, as has been suggested before, set the container to 960px and add some left/right padding.

Without seeing the site we can’t tell what this will do and it might break the site.

[AlirezaM]

Hello Pauli_D!

Actually I can’t use 980 px because I’m working for commercial purpose and I should create it in 960gs which is feature for my customers.

And also padding will make the slider not align to one line verticaly with other contents.

[wolfcry911]

@AndyHowells, I assure you it is (9.4.1):
http://www.w3.org/TR/CSS21/visuren.html#block-formatting

and in case you don’t grok what’s there, an earlier version spells it out (9.4 with a link to 9.10)
http://www.w3.org/TR/css3-box/#blockwidth

edit// and zoom was never part of the specs…

[Andy Howells]

@wolfcry911 – I read those passages you posted but literally no where does it recommend (one way or the other!) to use overflow: hidden; for clearing floats.

To each his own ultimately, but the clearfix method means you get no surprises or unintended consequences when trying to clear, like relatively positioned elements being cut off, shadows being sliced and so forth.

[wolfcry911]

You’re right – it doesn’t say overflow: hidden; it states overflow computes to value other than visible (the default). It also doesn’t recommend it’s use for clearing, or containing, floats. It just states that a new block formatting context is established and if height computes to auto, it’s spelled out how to calculate it. Nowhere does it recommend to use one method over another.

I’m not adverse to using clearfix – I use it myself when needed. But I don’t consider myself lazy for favoring overflow: hidden; to contain floats. As I stated above, I never advocated a single method, but recommend learning the multiple methods. There are times when containment is not even needed.

I don’t mean to banter on and on about this. I think you’ll agree that both methods are viable options to contain floats. If you prefer clearfix – great! I happen to prefer overflow.

One thing I would like to mention though is that I think credit is due to the originator of the clearfix method – Tony Aslett.

> 9.4.1 Block formatting contexts

>Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

[Kitty Giraudel]

I never ever use overflow: hidden as a clearfix method, especially because I don’t want -some days- to wonder why I can’t see my shadow or whatever.

However, to give credits to @Wolfcry911, the overflow method is clearly better to save bytes. 15 bytes vs 52 bytes (compressed) for the short version – so about 3.5 times less. You can drop it to about 45 bytes if you call your class “c” (or whatever one letter class name) instead of “clearfix”.

My two cents.

[Paulie_D]

>Actually I can’t use 980 px because I’m working for commercial purpose and I should create it in 960gs which is feature for my customers.

Then I’m afraid you will just have to go without the shadows?

[Author]

Posts