How to wrap more than one div around a div

Question

I have a div ( Slideshow ) and I want to wrap around it small divs ( Items ). The Slideshow div will be static and the Items will be rendered automatically using a Repeater Control .

I made this image to better illustrate what I need to achieve.

I saw this Question and I thought I could use the same logic, let the Repeater items get rendered normally and then change the markup using JavaScript and use some sort of a CSS Grid layout to style the first 4 items for example on the left and the right and the rest will be beneath them but I'm not sure how to do it plus if there's a more simple solution I thought it could be cleaner than using the concept I saw in the question I referred.

Update1 : Changed the picture to show the exact desired output

Answer 1

You could generate a Masonary layout. This plug in may be helpful, https://github.com/desandro/masonry

You could do this with bootstrap columns as well. For the first row, with the slideshow, you have 3 columns. The outer left and right columns will have 2 nested rows. http://getbootstrap.com/examples/grid/ . This is what Im most familiar with so I'll show you how I would implement a solution for the first row and how to implement a second row with 4 columns.

<div class="row">

    <!-- Outer Left Column -->
    <div class="col-xs-4">
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        Slide Show
    </div>

    <!-- Outer Right Column -->
    <div class="col-xs-4">
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
    </div>

</div>

<!-- Row With Four Items -->
<div class="row">
    <div class="col-xs-3">
        Item
    </div>
    <div class="col-xs-3">
        Item
    </div>
    <div class="col-xs-3">
        Item
    </div>
    <div class="col-xs-3">
        Item
    </div>
</div>

Checkout the angular material layout system as well. This will be harder to implement though because it requires Angular. https://material.angularjs.org/latest/#/layout/grid

Answer 2

Check this solution out and see if you can adopt it to your project: http://jsfiddle.net/1b0hoked/ .

HTML:

<div id = "wrapper">
    <div id = "slideshow"></div>
</div>

CSS:

*, :before, :after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

#wrapper {
    counter-reset: item-counter;
    text-align: right;
    margin: 0 auto;
    display: table;
    outline: 1px solid gray;
    position: relative;
}

#slideshow {
    width: 210px;
    height: 210px;
    line-height: 210px;
    text-align: center;
    border: 2px solid red;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -105px;
}

#slideshow:before {
    content: "Slide Show";
    vertical-align: middle;
    font: bold 16px/1 Sans-Serif;
    color: red;
}

.item {
    height: 100px;
    width: 100px;
    text-align: center;
    line-height:  96px;
    border: 2px solid #aaa;
}

.item:before {
    counter-increment: item-counter;
    content: "item " counter(item-counter);
    vertical-align: middle;
    font: bold 12px/1 Sans-Serif;
    color: #aaa;
}

.item {
    float: left;
    margin: 5px;
}

.item:nth-of-type(4n + 1) {
    clear: left;
}

.item:nth-of-type(3) {
    float: right;
    margin-top: -105px;
}

.item:nth-of-type(4) {
    float: right;
    clear: right;
    margin-left: -105px;
}

.item:nth-of-type(2) {
    clear: left;
}

JS/jQuery:

$(function() {
    var numToAdd = 50;
    while(--numToAdd >= 0) {
        $("</p>").addClass("item").appendTo("#wrapper");    
    }
});