One DIV On Top Of Another?

Is there any possible way of getting one DIV to sit ontop of another?

 

Multiple ways. Absolute positioning off a parent container, absolute positioning of one element inside the other (that's how glider-levin image replacement works), or negative margins are the methods that immediately come to mind.

My CSS only transparent drop-shadow works by placing the .shadow DIV underneath the .content one for example, using the positioning off the parent container trick (well, with some other trickery too)

http://battletech.hopto.org/html_tutorials/cssShadow/template.html

Do you have an example of exactly what you want overlayed atop each-other? I can give you better specifics once I know what effect you are going for. There are limitations to what can be done - usually you either have to take one of the elements out of flow, or you have to fix the height of one of the two elements... Though it really hinges on what content you are trying to work with inside those DIV.

 

well I have a header logo with a gap in it for a google banner ad to fit in it, trying to get it into place is the problem

E.G.

www.gametryout.com/index2.php

ive managed to get it on top of the logo but I cant seem to get it into position.

XHTML:

<div id="container">

<div id="header">

<div id="headerBanner">
<script type="text/javascript"><!--
google_ad_client = "pub-9403208891205475";
/* Header */
google_ad_slot = "7367132230";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><!-- end headerBanner-->

</div><!-- end header-->
</div><!-- end container-->

CSS:

#header {
background:url(images_homepagenew/logo.gif) no-repeat;
width: 845px;
height: 135px;
}

#headerBanner {
position: absolute;
float: right;
margin-left: 100px;
}

 

Nevermind, done it now

Thanks for the help, just used absolute positioning like you said