How to make nested divs appear as siblings with CSS?

Is it possib开发者_如何学Pythonle to make a nested structure of divs

<div>Content1
  <div>Content2
    <div>Content3</div>
  </div>
</div>

to look like divs with fixed width that float left?

<style>
  div {
    float: left;
    width: 200px;
  }
</style>
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>

I guess you can't do it with CSS. It's a language for defining the style of elements, not for modifying their structure. You could think about jQuery or XSLT for your case.

you can use margin-top property to get this effect

<div style="width:100px;height:100px;border:1px solid black">

<div style="width:100px;height:100px;border:1px solid green;margin-top:100px">
</div?

</div?

Actually you don't need to do anything really, this is the default behavior for block level elements.

Try to create a blank html page and insert the lines

<div>Content1
  <div>Content2
    <div>Content3</div>
  </div>
</div>

Without any form of styling the output will be:

Content1
Content2
Content3

Which is what you are asking for

I guess I figured how to do that with a bit of additional html and absolute positioning:

<div id="parent">
  <div class="nest">
    <div class="content">One</div>
    <div class="nest">
      <div class="content">Two</div>
      <div class="nest">
        <div class="content">Three</div>
      </div>
    </div>
  </div>  
</div>
//css:
#parent {
  position: relative;
}
div.nest {
  position:absolute;
  width: 200px;  
  top: 0;
  left: 200px; /*should be same as width */
  /* the next is the tricky part */ 
  margin: 0px;
  padding: 0px;
  border: 0px;
}
/* apply custom border, padding and margin here */
div.content {
  border: 1px solid #ccc;
  padding: 8px;
  margin: 4px;
}

Color me noobish, but couldn't you achieve something similar with an unordered list, since you're looking to nest elements? (http://jsfiddle.net/xDJAY/) Not sure if this is the structure you're looking for though.