www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] problem understanding nested div positioning

  1. #1
    Join Date
    May 2010
    Posts
    77

    resolved [RESOLVED] problem understanding nested div positioning

    Hi,

    I'm trying to create something here that involves some nested divs and I'm having trouble getting them to position correctly in IE. Could anyone please look at the code below and tell me what you see?

    The link is http://lotus.metrotechpc.com/testingzindex

    never mind the zindex part. That is where I was going to do some other testing so I called the directory testingzindex.

    css
    Code:
    body{
    background-color:#000000;
    margin:0 auto;
    }
    
    #outer{
    width:800px;
    height:60px;
    /*border:solid 1px #ffffff;*/
    position:relative;
    }
    
    #upper{
    position:absolute;
    top:0;
    width:800px;
    height:20px;
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #lower{
    position:absolute;
    bottom:0;
    width:800px;
    height:20px;
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #left{
    width:50px;
    height:20px;
    float:left;
    margin-top:20px;
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #right{
    width:50px;
    height:20px;
    float:right;
    margin-top:20px;
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #inner_link{
    
    }
    #inner_filler{
    
    
    }
    HTML
    Code:
    <html>
    <head><title></title>
    <link rel="stylesheet" type="text/css" media="all" href="default.css"/> 
    </head>
    
    
    <body>
    <div id="outer">
    	<div id="upper"></div>
    	<div id="left">L</div>
    	
    <!--Will be running more divs from left to right in this center row-->
    	
    	<div id="right">R</div>	
    	<div id="lower"></div>
    
    </div>
    </body>
    
    
    </html>
    It looks good in firefox but not in IE.

    Thanks

  2. #2
    Join Date
    May 2010
    Posts
    77
    OK I finally saw the problem. First I took out the position: all together accept for the outer container div.

    Then realized I was off on margin-top: settings. I was thinking in terms of deviding the 60px outer by 3 and then giving 20px to each row and had put a 20px margin on the second row and 40px margin on the 3rd row which apparently firefox was ignoring and displaying correctly while IE was going hay wire. I only needed 20px for the 3rd row and no margin for the 2nd row because the top row takes up the first 20px.

    Still confused about position:absolute, position:relative, position:fixed, etc. but the problem is solved for this page.

    Thanks

    Corrected CSS
    Code:
    body{
    background-color:#000000;
    margin:0 auto;
    }
    
    #outer{
    width:800px;
    height:60px;
    /*border:solid 1px #ffffff;*/
    position:relative;
    margin:0 auto;
    
    }
    
    #upper{
    /*position:absolute;*/
    top:0;
    width:800px;
    height:20px;
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #lower{
    /*position:absolute;*/
    margin-top:20px;
    width:800px;
    height:20px;
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #left{
    width:50px;
    height:20px;
    float:left;
    /*margin-top:20px;*/
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #right{
    width:50px;
    height:20px;
    float:right;
    /*margin-top:20px;*/
    /*border:solid 1px #ffffff;*/
    background-image:url('images/bar.gif') ;
    background-repeat:repeat-x;
    }
    #inner_link{
    
    }
    #inner_filler{
    
    
    }

  3. #3
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
    The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
    z-indexing ONLY works with elements that have a declared position.
    From an old post:
    The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands. Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
    http://www.cidigitalmedia.com/tutorials/flash_div.html
    View the source code or copy it and practice by changing z-index and positions.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  4. #4
    Join Date
    May 2010
    Posts
    77
    Quote Originally Posted by Eye for Video View Post
    Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
    The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
    z-indexing ONLY works with elements that have a declared position.
    From an old post:

    Best wishes,
    Eye for Video
    www.cidigitalmedia.com
    Thanks Eye for Video

    I got the source from that link plus I have plenty of test pages of my own. I'll have to play around with them till i totally understand it but the info from the old post is very helpful

  5. #5
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367
    I don't know if I am too late to join in this discussion but recently I was studying on CSS positioning and the terminology is so counter-intuitive at least to me.

    If I want a child to be positioned relative to it's parent, I declare the child as position: absolute and then the parent position: relative.

    If I read from child onwards, I would assume set my child position relative to my parent. So if parent move, I move along with it as I am relative to my parent.

    But it seems CSS takes another angle at it. If I read from parent onwards, my position: relative. All the child elements inside me is position relative to me. If I move, they move along together with me.

    This counter-intuitive (at least to me) meaning has me got caught in CSS positioning a few times.

    Hmmm.... CSS ppl think differently or I am the only developer that think differently?

Thread Information

Users Browsing this Thread

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

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