Welcome to WebmasterWorld Guest from 18.207.238.169

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

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

Junior Member

10+ Year Member

joined:June 7, 2005
posts:53
votes: 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; }

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 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?
11:56 pm on June 16, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:June 7, 2005
posts:53
votes: 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.

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

Junior Member

10+ Year Member

joined:June 7, 2005
posts:53
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members