...

View Full Version : Overlapping non-absolute divs



5pteron
11-07-2008, 04:08 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html,body {text-align:center; font:bold 12px "Lucida Sans Unicode"; height:100%; }
#container { width:850px; height:100%; margin:0 auto;}
.left {
border:1px solid #000;
height:100%;
width:200px;
background-color: #150000;
filter: Alpha(Opacity=85);
opacity: 0.85;
float: left;
position: relative;
}
.right {
border:1px solid #000;
height:100%;
width: 200px;
}
</style>
</head>

<body>
<div id='container'>
<div id='bottom'>
<div class='left'>Left Div</div>
<div class='right'>
<p>Right Divd</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>&nbsp;</p>
<p>d</p>
<p>&nbsp;</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>&nbsp;</p>
</div>
</div>
</div>
</body>
</html>

What I'm trying to do is overlap the Right div on top of the Left div, which is colored. And I'm trying to overlap without using absolute positioning. The left div is 85% opaque, and this div HAS to fit the height of the right div. That's why I'm not using absolute positioning.
Is it possible to overlap these two divs without absolute positioning? (if it's possible with absolute positioning, you can tell me that too.)

abduraooft
11-07-2008, 04:30 PM
As a first step add a right DOCTYPE (http://www.alistapart.com/stories/doctype/) at the top of your page. I'd recommend a strict one.

5pteron
11-07-2008, 04:49 PM
As a first step add a right DOCTYPE (http://www.alistapart.com/stories/doctype/) at the top of your page. I'd recommend a strict one.

Thanks. I just added it to the first line.

itsallkizza
11-07-2008, 05:01 PM
You can use position:relative to do the same thing.


<div style="width:200px;height:180px;background-color:#ff0000;float:left;"></div>
<div style="width:200px;height:180px;background-color:#0000ff;float:left;position:relative;left:-50px;"></div>


And of course with position:absolute you can position things wherever you want.

5pteron
11-07-2008, 05:33 PM
You can use position:relative to do the same thing.


<div style="width:200px;height:180px;background-color:#ff0000;float:left;"></div>
<div style="width:200px;height:180px;background-color:#0000ff;float:left;position:relative;left:-50px;"></div>


And of course with position:absolute you can position things wherever you want.

I want to overlap the two divs together. The code you have given me unfortunately doesn't overlap the two divs together.

itsallkizza
11-07-2008, 05:48 PM
Well that was just a demonstration of what's possible.

If you know the exact height/width of your first block, then you can give the overlapping block negative left or top values equal to that height/width (depending on if you're blocking or floating).

But since your content expands vertically that poses a problem.

You can set this in javascript onload (in my opinion though that's a sloppy solution) by grabbing the element's offsetHeight and setting the overlay element's style.height to match.

Another slightly sloppy method would be to duplicate the first element's content, exactly, in the second element, then give the overlay element's content visibility:hidden. That would match the heights no matter what browser, font-size or zoom level. You can then use position: absolute (or) relative to place the overlay. (You can also duplicate the content via JS onload so you don't have double hard-coded content in your html.)

However, I'm thinking maybe there's another way to go about achieving your ultimate goal (like nested container divs, rather than an overlay). What exactly is your desired end-result? (For example: "I want my content to be faded out by a solid slightly transparent color.")

5pteron
11-07-2008, 05:56 PM
Well that was just a demonstration of what's possible.

If you know the exact height/width of your first block, then you can give the overlapping block negative left or top values equal to that height/width (depending on if you're blocking or floating).

But since your content expands vertically that poses a problem.

You can set this in javascript onload (in my opinion though that's a sloppy solution) by grabbing the element's offsetHeight and setting the overlay element's style.height to match.

Another slightly sloppy method would be to duplicate the first element's content, exactly, in the second element, then give the overlay element's content visibility:hidden. That would match the heights no matter what browser, font-size or zoom level. You can then use position: absolute (or) relative to place the overlay. (You can also duplicate the content via JS onload so you don't have double hard-coded content in your html.)

However, I'm thinking maybe there's another way to go about achieving your ultimate goal (like nested container divs, rather than an overlay). What exactly is your desired end-result? (For example: "I want my content to be faded out by a solid slightly transparent color.")

There's a background image set up for <body>. What I'm ultimately trying to do is create a div for main contents, which is transparent for some level, so you can see through the background image. Since everything within a div that uses 'filter: alpha(opacity=)' gets transparent, I want to make a same-size div overlap over the original div, and the actual contents go here. So actual contents such as texts, images, etc. don't get transparent. The reason I'm avoiding absolute positioning is because if the contents get long, the absolute-positioned div doesn't get long. It's just stuck the way it is.

Apostropartheid
11-07-2008, 06:39 PM
There's a background image set up for <body>. What I'm ultimately trying to do is create a div for main contents, which is transparent for some level, so you can see through the background image. Since everything within a div that uses 'filter: alpha(opacity=)' gets transparent, I want to make a same-size div overlap over the original div, and the actual contents go here. So actual contents such as texts, images, etc. don't get transparent. The reason I'm avoiding absolute positioning is because if the contents get long, the absolute-positioned div doesn't get long. It's just stuck the way it is.
Why don't you use a semi-transparent PNG? You can use this in conjunction with conditional comments to feed IE6 a solid background instead.

5pteron
11-08-2008, 09:08 AM
Thanks for the helps! Got this resolved by left: - px;.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum