I'm trying to get a child DIV tag to overlap the border of it's parent
DIV tag in order to create an effect as follows:
+----------------------------------------------------------+
| |
+--------------------------------------------------------------+
| Child DIV Tag |
+--------------------------------------------------------------+
| |
| Parent DIV Tag |
+----------------------------------------------------------+
I've put together a simple html that I think *should* create the
desired effect within the content area of a simple framework.
Unfortunately it only overlaps on the right hand side; the left looks
like it should be overlapping (the content gets a little chopped off
at the left) but nothing is displayed outside the parent div tag.
I've included the html file below. I would usually put it on my web
server but unfortunately a few technical problems has left me with a
few difficulties in that area. For much the same reason I've only been
able to test with IE6 Win.
Any help will be much appreciated. I've been bashing my head against
this for hours now (hopefully a case of missing the woods for the
trees).
- Tintax
--- START HTML FILE CONTENTS ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html, body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: #000000;
font-weight: normal;
padding: 0 ;
margin: 0 ;
}
#header {
position: absolute ;
left: 0 ;
top: 0 ;
margin: 0 ;
padding: 0 ;
height: 50px ;
width: 100% ;
background-color: #EEEEEE ;
z-order: 0 ;
}
#infobar {
position: absolute ;
left: 0 ;
top: 50px ;
margin: 0 ;
padding: 0 ;
height: 18px ;
width: 100% ;
background-color: #222222 ;
z-order: 1 ;
}
#navbar {
position: absolute ;
left: 5px ;
top: 73px ;
width: 120px ;
margin: 0 ;
border: 1px solid #000000 ;
padding: 2px ;
background-color: lightblue ;
z-order: 2 ;
}
#content {
margin: 73px 30px 20px 155px ;
padding: 10px ;
border: 1px solid #000 ;
background-color: lightgreen ;
height: 300px ;
min-width: 500px ;
text-align:left;
}
#title {
position: relative ;
background-color: lightyellow ;
padding: 0px ;
margin-right: -20px ;
margin-left: -20px ;
border: 1px solid red ;
width: 100% ;
voice-family: "\"}\"";
voice-family: inherit;
width:auto;
}
html>body #title {
width:auto;
}
</style>
</head>
<body>
<div id="content">
<div id="title"><h1>Header One</h1></div>
<p>This is a random line of text that makes very little sense but
should makes the browser wrap the
paragraph onto another line.</p>
</div>
<div id="header"> </div>
<div id="infobar"> </div>
<div id="navbar"> </div>
</body>
</html>
--- END HTML FILE CONTENTS ---
