Question

Here is a basic scenario (I’m not doing this to align text specifically, but div’s with lots of other stuff in them so don’t tell me this isn’t the most appropriate way to align text 😀 I’m more interested in the principle here);

<div id="1" class="mydivclass">
  <p>The first div</p>
  <div id="2" class="mydivclass">
    <p>The second div</p>
    <div id="3" class="mydivclass">
      <p>The third div</p>
    </div>
  </div>
</div>

Using css, can I make div’s with a child div (a div inside a div) using the same class to position them self on the page, relative to it’s parent? So I would like my output from the above to look like this:

The first div
  The second div
    The third div

I’d like to know if I can, and how to if so, achieve this using CSS? For example, could you use something like the following to pad each child div 10 more pixel in than the parent, to give the above result?

.mydivclass {
  padding-left: 10px;
}

So, by nesting the same CSS class on each div, they are slowly incrementing their horizontal alignment.

Answer 1

Do you mean a combinaison of position:relative; and left like this? http://jsfiddle.net/EUTPB/