I have the need to render arbitrary bits of content (form elements, text, images) in HTML. Layout-wise, the concept of a "stack panel" from XAML is close to what I'm looking for. Some of the content I want to lay out vertically, and some horizontally. So, I want the HTML to look something like this:\[code\]<div class="stack-vert"> <div class="stack-vert"> <div class="content">Vert 1</div> <div class="content">Vert 2</div> </div> <div class="stack-horz"> <div class="content" style="width: 50px; height: 75px;">Horz 1</div> <div class="content" style="width: 50px; height: 50px;">Horz 2</div> <div class="content" style="width: 100px; height: 200px;">Horz 3</div> <div class="stack-vert"> <div class="content">Horz 4, Vert 1</div> <div class="content">Horz 4, Vert 2</div> </div> </div> <div class="stack-vert"> <div class="content">Vert 3</div> <div class="content">Vert 4</div> </div></div>\[/code\]The hard coded widths and heights are just there to simulate content of different sizes. I have CSS that correctly lays out one level of horizontal, vertical correctly:\[code\]DIV.stack-vert{ border: solid thick red;}DIV.stack-horz{ border: solid thick blue;}DIV.content{ padding: 5px; background-color: grey; margin: 5px;}DIV.stack-horz DIV.content{ display: inline-block;}\[/code\]This HTML and CSS renders like this:
As you can see, what I'm hoping to achieve is that "Horz 4, Vert 1" and "Horz 4, Vert 2" render to the right of "Horz 3", but in a vertical stack. However, this is not happening, because the stack-vert display of block.How do I achieve "stack panel" like layout of arbitrary content sections using HTML / CSS, and to an arbitrary depth of containers?NOTE: Ideally I'd like to solve this using "raw" HTML / CSS but I would consider framework-based solutions such as with jQuery.EDIT #1: @Aequanox's answer is close, but it doesn't support IE 9. IE 9 support is essential, as most of my users are on that browser (it's an internal app).