asked on

Div layered above another div????

I basically have one div tag that is going to over lap another div tag...
<div>
<div id='inner'>
Some dynamic content, can be any size.....
</div>
</div>

I need to have the outer div tag lie on top of the inner div tag. With a dashed border directly on top of it.. The same length and height of the inner div tag.
So if the inner div is 100 X 100...The outer div needs to be 100 X 100 directly on top of the inner with nothing but a dashed border...
Any help much appreciated

GrandSchtroumpf

Can i ask you why you want the outer div to be on top if it's transparent?
Is it to stop the user from interacting with the content of the inner div?

I came up with the code that follows which works fine in IE, FF and Opera...
All browsers still allow text selection and FF even allows interaction with the form controls for some strange reason.
I had to add an additional div to make it work in FF and use a hack for IE that always needs special treatment.
And i added a transparent/black checkered backgound image to the outer div to show that it is on top...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Test</title>
<style type="text/css">

body {
background: #eee;
color: #111;
}

#outerer {
position: relative;
z-index: 1;
}

* html #outerer {
position: static;
}

#outer {
border: 1px solid black;
background: url(http://www.serger.biz/ee/transparent_checkers.png);
}

#inner {
position: relative;
z-index: -1;
color: red;
font-size: 200%;
font-weight: bold;
}

</style>
</head>
<body>

<div id='outerer'>
<div id='outer'>
<div id='inner'>
Some dynamic content, can be any size.....
<input type="button" value="hello">
<input type="text" value="world">
</div>
</div>
</div>

</body>
</html>

nywebsol

ASKER

my problem is that my width is set to a strict width for the page. Once we have any border around a div tag... it makes it wider. that is why i am trying to get something to appera on top of the inner area

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial