Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overlapping non-absolute divs

    Code:
    <!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.)
    Last edited by 5pteron; 11-07-2008 at 04:49 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    As a first step add a right DOCTYPE at the top of your page. I'd recommend a strict one.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    As a first step add a right DOCTYPE at the top of your page. I'd recommend a strict one.
    Thanks. I just added it to the first line.

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    You can use position:relative to do the same thing.
    Code:
    <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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    You can use position:relative to do the same thing.
    Code:
    <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.

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.")
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    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.
    Last edited by 5pteron; 11-07-2008 at 05:59 PM.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by 5pteron View Post
    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.

  • #9
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the helps! Got this resolved by left: - px;.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •