• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 449
  • Last Modified:

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
0
nywebsol
Asked:
nywebsol
  • 2
1 Solution
 
GrandSchtroumpfCommented:
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>
0
 
nywebsolAuthor Commented:
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
0
 
GrandSchtroumpfCommented:
having your "outer" div on top of the "inner" div won't change the way the widths of elements are calculated.

set your width on a block element that does not have a border and use the default width ("width: auto") for the block element that has the border:

<div style="width: 10em;">
<div style="border: 10px solid red;">
Some dynamic content, can be any size.....
</div>
</div>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now