Overflow:auto with floats AND overflow:visible

Question

I am trying to make two floated divs with box-shadow to display the shadows outside of their container. It won't display because their parent has overflow: auto set, which cuts off the shadow, but is nevertheless necessary so the parent won't collapse because both child divs are floated. If I set the parent to overflow: visible it collapses, obviously, because the children are floated. Thanks for any help.
JS Fiddle: http://jsfiddle.net/zJGVz/

HTML

<div id='parent'>
  <div id='child1'></div>
  <div id='child2'></div>
</div>

CSS:

#parent {
  margin: 0 auto;
  width: 200px;
  background: green;
  overflow: auto;
}
#child1 {
  width: 150px;
  height: 200px;
  float: left;
  background: pink;
  box-shadow: 0 0 10px 0 #000000;
}
#child2 {
  width: 30px;
  height: 200px;
  float: left;
  margin-left: 20px;
  background: blue;
  box-shadow: 0 0 10px 0 #000000;
}

Can you also provide a screenshot of how you want it to display? — Nitesh
– Nitesh, Commented May 24, 2013 at 13:18
I tweaked the question to match the jsfiddle. @NathanLee, When overflow:auto is set, the shadows are not seen outside the parent. When overflow:visible is set. The shadows are visible but the parent is collapsed. in the JS fiddle, simply change the overflow value between auto and visible. — preahkumpii
– preahkumpii, Commented May 24, 2013 at 13:22

Cattsan · Accepted Answer · 2013-05-24 13:26:03Z

1

You can add a 5px margin to both children on the sides that touch the edge of the parent.

#child1 {
  width: 700px;
  float: left;
  box-shadow: 0 0 5px 0 #000000;
  margin:0 0 5px 5px;
}
#child2 {
  width: 300px;
  float: left;
  box-shadow: 0 0 5px 0 #000000;
  margin:0 5px 5px 0;
}

See the JSFiddle.

answered May 24, 2013 at 13:26

Cattsan

1456 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

preahkumpii Over a year ago

So far, this looks like the best option.

Bobby · Accepted Answer · 2013-05-24 13:19:28Z

0

Try changing the overflow to 'visible'

overflow: visible;

answered May 24, 2013 at 13:19

Bobby

2,9383 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

Overflow:auto with floats AND overflow:visible

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related