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...
--~--~---------~--~----~------------~-------~--~----~
--
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]
-~----------~----~----~----~------~----~------~--~---
