Shadows - how to properly contain elements that have shadows and are floated?

Hello all,

I have an issue regarding two elements signed with a red border here:

http://help.nuvemk.com/testStructure4/

Those two containers should allow their children to have their shadow border displayed, while themselves should NOT have any shadow border defined.

So:

#training-organizations
#events-facebook

Should contain but NOT have any shadow borders.

While the child elements:

#trainings-resume
 #organizations-resume
 #events-resume
 #facebook-resume

Should have their shadow properly displayed.

box-shadow:*1px 1px 3px #999999;

Whenever we do this, and we try to apply this, we will notice that the right and left shadows never appear! (due to overflow hidden perhaps?)

I’m trying my best to deal with this, but nothing seems to work.
Should we forget about overflow hidden on this case, and try to contain the floats using the clear:fix method, or is there a simpler solution ?

Thanks in advance,
m.

yeah! Solved.
Not sure however if it’s the proper way for doing it.

Issue declarations and appropriate solution:

#training-organizations, #events-facebook {
    overflow: hidden;
    clear: both;
    margin: 0 auto;
    max-width: 60em; <-- change to 58.8em
    min-width: 440px;
    padding: 7px 0; <-- instead of 0 give 1% (this will display the border);
    width: 98%;
}

:slight_smile:

I thought I could contribute some key concepts about box shadow that might help (even if the cause some disappointment).

  1. By the spec, box shadow is supposed to act as if it want part of the box model. Although FF has a bug that will cause scroll bars to occur if the rendered shadow fall outside the viewport.

  2. Overflow hidden WILL hide box-shadows as well.

Essentially what you have done is made the content are smaller AND allowed space in the parent for the shadow to be rendered and not hidden by the PARENT ELEMENT’s overflow.

A more graceful way of doing it :

#training-organizations, #events-facebook {
    overflow: hidden;
    clear: both;
    /*margin: 0 auto; I ma unclear as to why this is here?  if the original width of these element was 100% why did they need to be centered via this method?*/
    max-width: 60em;
    min-width: 440px;
    padding: 7px; /*this  is extra room for your shadow  to display*/
    /*width: 98%; You don't need this, block elements default to 100% INCLUDING padding, but if you declare width padding will be ADDED, eg: 100% +7px +7px*/
}

Hope that clears things up

Thanks a lot.

I actually couldn’t get rid of the 1% on the left and right padding, because the all structure would change.
But I’ve removed the strange 58.8 and the width of 98% and the, since the width would be 100% I have also removed the margin: 0 auto; as suggested.

Like so:


#training-organizations, 
#events-facebook {
    overflow : hidden;
    clear:both;
/*    margin: 0 auto;*/
    max-width:60em;
    min-width:440px;
/*    width:98%; */
    padding : 7px 1%; 
}

This is my first fluid layout and I was struggling at some points. This was precious to me:

One question still remains, isn’t it better to redeclare things like define width of our elements with 100% just to make sure browsers or whatever, for some reason don’t have that, or is this absurd ?

You won’t need to declare the width:100%; for block level elements unless they are receiving a width from a previous statement. e.g.:


#results li {
  width:80%;
}
#results li.wide {
  width:100%;
}

Like dresden_phoenix said, it’s important to remember that when a block level element has its width set to “auto” (which is the default value), the padding is inclusive of the width (and as a result the box will only ever be as wide as its parent). Unless of course your padding causes the box to exceed its parents width e.g.:


/* Assuming <div id="content"> <div id="content_inner"></div> </div> */
#content {
  width:500px;
}
#content_inner {
  padding:50px 300px; /* will push to 100px wider than #content */
}

Additional reading: http://css-tricks.com/2841-the-css-box-model/ , http://reference.sitepoint.com/css/boxmodel

One question still remains, isn’t it better to redeclare things like define width of our elements with 100% just to make sure browsers or whatever, for some reason don’t have that, or is this absurd ?

No you DON’T need to re declare width. ALL browsers have give BLOCK elements ( and elements which have been given display:block) a width equal to their containing element ( for all intents and purposes 100%) by default. This have never been a question, and you can count on it :).

Remember declaring width changes how border and padding are added to it.

IF for some reason you have a rule were you declared width and wanted to go back to ‘default’ then use this: width:auto; instead of width:100% ( unless, you its actual final dimension to be the elements width+padding left+padding right+ border left + border right)

All clear (for now).

Thanks a lot. :slight_smile: