#1
  1. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Mar 2008
    Posts
    1,928
    Rep Power
    378

    Nested divs with css


    Hello,

    I've got some html that looks like this...

    Code:
    <div id='a'>A
    
     <div id='b'>B</div>
     <div id='c'>C
    
       <div id='d'>D
         <div id='e'>E</div>
         <div id='f'>F
           <div id='g'>G</div>
           <div id='h'>H
             <div id='i'>I</div>
             <div id='i'>I</div>
           </div>
         </div>
       </div>
    
       <div id='d'>D
         <div id='e'>E</div>
         <div id='f'>F
           <div id='g'>G</div>
           <div id='h'>H
              <div id='i'>I</div>
              <div id='i'>I</div>
           </div>
         </div>
       </div>
    
       <div id='d'>D
         <div id='e'>E</div>
         <div id='f'>F
           <div id='g'>G</div>
         </div>
       </div>
    
    
     </div>
    </div>
    ...which I'd like to render like this...



    If it makes sense to do so, the html can probably be rewritten too. Despite reading through a number of tutorials concerning floats and relative vs absolute positioning, my efforts so far have been lamentable, so any help greatly appreciated.
    Last edited by cafelatte; April 8th, 2013 at 07:17 AM.
  2. #2
  3. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,706
    Rep Power
    1959
    If you have tried something, please post the code.

    Maybe this tutorial can give you some thoughts on how to get started:
    http://learnlayout.com/

    I will suggest you try with something smaller first, for example start out to get A B C correct, then build it further with D then E and F etc.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    276
    You can only use ID's once, not multiple times, so, you will first need to change your HTML structure and change your ID's "D through I" to Classes, so, they can be used multiple times.

IMN logo majestic logo threadwatch logo seochat tools logo