#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    dayton ohio
    Posts
    74
    Rep Power
    11

    css & nested divs...


    First off - I'm not even sure if its technically allowed or correct but I am nesting 3 <div>'s in one container <div>

    (I assume this is ok - quite positive)

    So when positioning nested <div>'s I am running into problems.

    Here is the link
    http://www.nextwavehosting.net/new
    (looking at the bottom bar with the website thumbnail, info, and the word test)

    Here is a snippet of code...

    The container...
    Code:
    div.bottomInfo {
    	position: absolute; top: 510px; left: 15px;
    	width: 723px;
    	height: 190px;
    	z-index: 6;
    	background-color: #EDEBE6;
    }
    The nested <div>'s
    Code:
    div.featured {
    	position: relative; top: 15; left: 252;
    	width: 150px;
    	height: 114px;
    	z-index: auto;
    }
    
    div.featInfo1 {
    	position: relative; top: 20; left: 252;
    	width: 150px;
    	height: 35px;
    	z-index: auto;
    }
    
    div.featInfo2 {
    	position: relative; top: -32; Left: 670;
    	z-index: auto;
    }
    the first nested <div> is positioned exactly how it should...
    the 2nd <div> is correct horizontally but vertically i would assume that it is still being positioned relative to the container... meaning that the second <div>'s top: 20; should be more like top: 140; to position it just below the first <div> yet the top: 20; works...

    the 3rd one is way off and is nearly impossible to position correctly...

    Any helpful tips or advice on this one?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    dayton ohio
    Posts
    74
    Rep Power
    11
    well, instead of using relative - I used absolute and it works correctly...

    Why would I use relative and or which is the correct way to do it?
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    you have forgotten to specify a lenght unit for positions for the nested divs,
    use either px, em %, etc..
    http://www.w3.org/TR/CSS2/syndata.html#length-units
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally Posted by emp/ir:kal
    <snip>

    Here is a snippet of code...

    The container...
    Code:
    div.bottomInfo {
    	position: absolute; top: 510px; left: 15px;
    	width: 723px;
    	height: 190px;
    	z-index: 6;
    	background-color: #EDEBE6;
    }
    The nested <div>'s
    Code:
    div.featured {
    	position: relative; top: 15; left: 252;
    	width: 150px;
    	height: 114px;
    	z-index: auto;
    }
    
    div.featInfo1 {
    	position: relative; top: 20; left: 252;
    	width: 150px;
    	height: 35px;
    	z-index: auto;
    }
    
    div.featInfo2 {
    	position: relative; top: -32; Left: 670;
    	z-index: auto;
    }
    the first nested <div> is positioned exactly how it should...
    the 2nd <div> is correct horizontally but vertically i would assume that it is still being positioned relative to the container... meaning that the second <div>'s top: 20; should be more like top: 140; to position it just below the first <div> yet the top: 20; works...

    the 3rd one is way off and is nearly impossible to position correctly...<snip>
    As Akh mentioned, you must declare your metric units. Your code is doing just as you tell it. Relative positioning is referenced from its normal position in the flow. Thus, top: -32px; means 'shift me up from here by 32px.' An absolute positioned element is referenced from its nearest positioned parent element. Thus top: -32; means 'place me 32 px above the top of my parent container.' There is a subtle, but critical difference.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo