How to make nested divs appear as siblings with CSS? - css

Question

Is it possible 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>

Answer 1

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.

Answer 2

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?

Answer 3

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

Answer 4

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;
}

Answer 5

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.