[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Div layered above another div????

Posted on 2006-06-29
5
Medium Priority
?
444 Views
Last Modified: 2012-06-21
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
Comment
Question by:nywebsol
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17014451
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
 

Author Comment

by:nywebsol
ID: 17018846
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
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 1000 total points
ID: 17023749
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question