I believe your problem is caused by making levels 2 and 3 have a position relative of 20 pixels.
Instead, try to give levels 2 and 3 a margin-left of 20px. Let me know how it goes. On Mon, Jan 5, 2009 at 7:10 AM, Mark Smith <[email protected]>wrote: > > Consider the following code: > > <html> > <head> > <style> > .stdtree > { > border-width: 2px; > border-color: black; > border-style: solid; > } > > .stdtree .level1 { > background-color: #eeeeff; > text-indent:30px; > text-align: left; > } > > .stdtree .level2{ > background-color: #eeffee; > position:relative; > left:20px; > text-indent:30px; > text-align: left; > } > > .stdtree .level3 { > background-color: #ffeeee; > position:relative; > left:20px; > text-indent:30px; > text-align: left; > } > </style> > </head> > <body> > <div class="stdtree" style="width:400px"> > <div class="level1">This is level 1 > <div class="level2">This is level 2 > <div class="level3">This is level 3 > </div> > </div> > </div> > </div> > </body> > </html> > > So, I have 4 div elements nested inside eachother. An outside > container (stdtree) and 3 levels. Each level is indented 20 pixels to > the left of the previous. If you render the above code, levels 2, and > 3. Poke outside of the main container block. How could I prevent this? > (Without manually setting the width for each one, as I might > eventually want to have multiple instances of each, with varying > widths) > > Thanks for any ideas... > > > -- -Richard Aday --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
