Drop shadow problem - outer divs not respecting height of inner divs - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Drop shadow problem - outer divs not respecting height of inner divs

zRonin

4:28 am on Jun 16, 2007 (gmt 0)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
 #top_left_pad {
  background-image: url('images/lpanel_drop.png');
  background-repeat: repeat-y;
  background-position: center;
  position: relative;
  left: -11px;
  width: 266px;
  z-index: 1;
 } #top_left {
  width: 230px;
  position: relative;
  left: 12px;
 }
</style>
</head>
<body>
 <div id="top_left_pad">
  <div id="top_left">
   stuff here, more divs, etc.
  </div>
 </div>
</body>
</html>

My intent is to create a DIV outside of the left panel content DIV that has a buffer on each side so I can create a drop shadow. Using the above code, the outer "padding" DIV is not stretched to the height of the inner div. How can I get this concept to work without specifying html>body #top_left_pad { height: x; }

Robin_reala

8:22 am on Jun 16, 2007 (gmt 0)

I'm not sure why you're specifying position:relative on both your divs and moving them both around? Don't you just want padding on your outer div?

zRonin

11:56 pm on Jun 16, 2007 (gmt 0)

These divs only represent one of 4 locations all contained in a wrapper div. I want the dropshadow to go outside the wrapper div, so I push it to the left a few pixels. I don't want the content div to be outside the wrapper div, so I push it back to the right.

There is a drop-shadow around the wrapper and also a drop shadow around the top-left and bottom-right divs.

*+---------+
[ Ś**]*****Ś
[ Ś**]*****Ś
*Ś********Ś
*Ś********Ś
*+---------+

You can see in this crude drawing in which [ is the top_left_pad div that I want it to go outside the main content area of the page.

zRonin

4:16 am on Jun 17, 2007 (gmt 0)

In order to get the parent div to "contain" the floated elements within it, you must specify the overflow of the parent div to "auto" or "hidden." This doesn't work in all browsers and there are also other solutions, but this is the best I've found.