www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Layered Divs ... and centering...

  1. #1
    Join Date
    Jun 2003
    Posts
    72

    resolved [RESOLVED] Layered Divs ... and centering...

    I have two layers ... The top layer needs to be centered ontop of the other layers. For some reason I cant get it working...


    Code:
        <div id="content">This content needs to be centered in the page ... and sitting ONTOP of the other layer... Right now it is resting ABOVE other layers.... not ONTOP of the other layers.</div>
    
        <div id="pageback">
            <div id="top-blu"> The is the background upper portion of the page (which is a blue bar)</div>
            <div id="bot-wht"> The is the background lower portion of the page (Which is white)</div>
        </div>
    Here is the style sheet...

    Code:
    #content { position:relative; width:850px; margin:0 auto; z-index:100; }
    
    #pageback 		{ position:relative; width:100%; height:100%; z-index:0; top:0; left:0; }
    	#top-blu 	{ position:absolute; background-color:#00AFF0; width:100%; height:292px;  }
    	#bot-wht 	{ position:absolute; background-color:#FFF;    width:100%; top:292px; }
    Any ideas how to fix this?

  2. #2
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    gotta add positioning

    HTML Code:
    #content { position:relative;top:100px; left:0; width:850px; margin:0 auto; z-index:100;}
    "Problems cannot be solved by the same level of thinking that created them.

  3. #3
    Join Date
    Jun 2003
    Posts
    72
    Thought I tried that in an earlier iteration...

    Well, that solved the centering issue. But, above the top-blu area is about 10 pixels of space.... I've attached an image to this post to show it. It looks like there's a margin above the top-blu area.

    Here is what I have now ... trying to get rid of the space above top-blu....

    Code:
    #content { position:relative;top:100px; left:0; width:850px; margin:0 auto; z-index:100;}
    
    #pageback 		{ position:relative; width:100%; height:100%; z-index:0; top:0; left:0; margin:0; padding:0;  }
    	#top-blu 	{ position:absolute; background-color:#00AFF0; width:100%; height:292px; top:0px; margin:0; padding:0;  }
    	#bot-wht 	{ position:absolute; background-color:#FFF;    width:100%; top:292px; }
    And I did notice that if I change the blu-top style for "top" to -20px ... it goes away ... but I assume that would cause some problems in other browsers. So, the question is, where is this 20px margin coming from?

    Code:
    #top-blu 	{ position:absolute; background-color:#00AFF0; width:100%; height:292px; top:-20px; margin:0; padding:0;  }
    Attached Images Attached Images
    Last edited by jabbamonkey; 07-31-2012 at 03:06 PM.

  4. #4
    Join Date
    Jun 2003
    Posts
    72
    Think I got it....

    The two relative positioning were putting one div under the other ... even though one was positioned elsewhere...

    Code:
    #pageback 		{ position:absolute; width:100&#37;; height:100%;  top:0; left:0; z-index:0; margin:0; padding:0; }
    	#top-blu 	{ position:absolute; width:100%; height:292px; top:0; background-color:#00AFF0; z-index:0;   }
    	#bot-wht 	{ position:absolute; width:100%; 			   top:292px; background-color:#FFF;  z-index:0;   }
    
    #content { position:relative; top:0px; left:0; width:850px; margin:0 auto; z-index:100;}

  5. #5
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    "Problems cannot be solved by the same level of thinking that created them.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles