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 5 of 5

Thread: Div Overlap

  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div Overlap

    I am having some trouble getting my divs to perform correctly.

    I have 4 divs in a 2x2 grid within a container div.
    Code:
    [A] [B]
    [C] [D]
    What I am having trouble doing is adding a 5th div in the middle overlapping parts of the other divs.

    Code:
    [A] [B]
       [E]
    [C] [D]
    Here is the css I have for each div.

    Code:
    container = position:relative;float:left;height:276px;width:526px;
    A = position:absolute;left:0;top:0;height:125px;width:250px;
    B = position:absolute;right:0;top:0;height:125px;width:250px;
    C = position:absolute;left:0;bottom:0;height:125px;width:250px;
    D = position:absolute;right:0;bottom:0;height:125px;width:250px;
    E = position:absolute;left:203;top:73;z-index:2;height:130px;width:120px;
    Everything works except for E. I thought I had it correct but for some reason it displays at the top left of the browser window.

    Any suggestions would be appreciated.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Everything works except for E. I thought I had it correct but for some reason it displays at the top left of the browser window.
    Please post your current code including DOCTYPE so that we can work on.
    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
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well part of the problem is I am working in a customized version of Drupal so I don't have access to all of the html or css code.

    Code:
    <div style='position:relative;float:left;height:276px;width:526px;'>
         <div style='position:absolute;left:10;top:10;height:125px;width:250px;'>Content</div>
         <div style='position:absolute;right:0;top:0;height:125px;width:250px;'>Content</div>
         <div style='position:absolute;left:0;bottom:0;height:125px;width:250px;'>Content</div>
         <div style='position:absolute;right:0;bottom:0;height:125px;width:250px;'>Content</div>
         <div style='position:absolute;left:203;top:73;z-index:2;height:130px;width:120px;'></div>
    </div>
    And yes, inline CSS is all I can do as I do not have access to the header or the .css files.

    EDIT: Also I meant to say the last div (the one that needs to overlap) isn't at the top left of the browser but is at the top left of the container div. I gave wrong info in first post sorry.
    Last edited by seymourj; 06-15-2009 at 04:37 PM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Shouldn't your last <div> be
    Code:
    <div style='position:absolute;left:203px;top:73px;z-index:2;height:130px;width:120px;background:#ccc;'></div>
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that did it. Thanks for the help.


  •  

    Posting Permissions

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