Inside of it I have implemented flex slider with no-margion (margin:0px) but I have 2 right and left shadows for slider which can't be shown because the container is 960px and my slider is too.
Is ther any way to overflow those shadows from parent div (container)?
@DavidYarham: of course I did. My point was, if you set overflow: hidden on an element, don't expect external shadows to be visible. I think we can agree on that point. :)
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.
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.
@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.
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.
I usually use overflow hidden. But on my new site I'm making a couple browsers wrongly clipped a fixed animated image at the wrap with overflow. FYI fixed is from the body so they are wrong. So I had to use clearfix.
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".
Hello to everyone reading this!
I have used 960gs to design a web page.
Inside of it I have implemented flex slider with no-margion (margin:0px) but I have 2 right and left shadows for slider which can't be shown because the container is 960px and my slider is too.
Is ther any way to overflow those shadows from parent div (container)?
Thanks in advance
Alireza.M
It should be visible by default. If it's not visible then one of its containers has
overflow:hidden;set on it.I didn't know it can be shown as overflowed.
Actually I have used flex-slider which is using overflow:hidden to hide other slides.
Now How can I achieve those shadows for this slider?
The answer, simply. is that you can't (AFAIK) while you have overflow:hidden set.
Seconded. You can't show external shadows if your element has overflow: hidden set.
You can actually.
See my codepen: http://codepen.io/davidyarham/pen/sHiGm
put a little padding on your container
Isn't that likely to break his layout given the requirements in the OP?
I forgot to say: you cant have position:relative on your parent though...
I don't know. I know putting padding on any of my layouts breaks nothing
Nor mine because I use the box-sizing: box-model property wherever possible.
...but the OP is using 960gs and I think it might?
Ahh. Never even looked at 960.
@DavidYarham: the element with the shadow doesn't have overflow: hidden set. His parent has. :)
@HugoGiraudel Yes I know, did you look at my codepen?
@DavidYarham: of course I did. My point was, if you set overflow: hidden on an element, don't expect external shadows to be visible. I think we can agree on that point. :)
@HugoGiraudel the majority of the time yes :) but with the absolute position you can get round it.
Yeah...but that's cheating. :)
@Paulie_D :)
Oveflow: hidden; is a clearfix for the lazy.
Best bet is to use Nicolas Gallagher's Clearfix;
I take offense to that - why is it lazy to use a method from the specs?
Perhaps lazy isn't the right word. It certainly leads to unforeseen issues.
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.
@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.
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.
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.
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.
@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...
@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.
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.
If you don't care about ie6 and 7 this is all you need for clearfix
I usually use overflow hidden. But on my new site I'm making a couple browsers wrongly clipped a fixed animated image at the wrap with overflow. FYI fixed is from the body so they are wrong. So I had to use clearfix.
I never ever use
overflow: hiddenas 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.
Then I'm afraid you will just have to go without the shadows?