Want to arrange css divs in a proper way

Question

Please, Please answer / help me.

I have three divs with CSS and it is generated dynamically.

And I call them wincontainer, smalldiv and largediv. wincontainer is a container of smalldiv and largediv as we can see in the image.

properties of divs

<!-- wincontainer -->
<ol class="wincontainer" style="width: 938px;float: left;border: 2px solid #CCC;"></ol>

<!-- smalldiv -->
<div id="smalldiv" style="
     width: 420px;
     margin: 10px;
     margin-top: 10px;
     background-color: #ffffff;
     font-size: 13px;    
     text-align: justify;
     word-wrap: break-word;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;    
     border: 1px solid #BFBFBF;    
     float: right;
     clear: right;"> </div>

<!-- largediv -->
<div id="largediv" style="
     width: 408px;
     margin: 10px;
     margin-top: 10px;
     background-color: #ffffff;
     font-size: 13px;
     min-height: 50px;
     text-align: justify;
     word-wrap: break-word;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     box-shadow: 0px 1px 1px #CCC;
     border: 1px solid #BFBFBF;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;">

As we can see we have 2 largedivs and 4 smalldivs which is dynamically generated yet

Question: I want to arrange small and large div in a proper way. As like this picture. fig (1). but they are coming like as fig (2)

As i said I cannot create sub wrappers because they are dynamically and very important serial wise generated...if i make the subwrapper then it cant be in serial wise

Note: I can not make another special div to contain smalldiv or largediv to separate it, because that small and large div is in a serial wise so we cant put them in a special container and they are dynamic.

In JSFIDDLE -> http://jsfiddle.net/jwy3c3n5/ when you delete the upper most smalldiv then it will work fine but when you add smalldiv on top it goes mad.. i want to fix it and make it proper way at unlimited div

a div will either be largediv or smalldiv, there will could be a variable number of each and can appear in any order. All largediv and smalldiv are contained within wincontainer. Additional markup is not allowed.

Answer 1

Here's an option that requires JavaScript:

$(document).ready(function(){
    var containerTop = $('.container')[0].offsetTop,
        lpos = containerTop,
        rpos = containerTop;
    $('.container > div').each(function(){
        var $el = $(this),
            el = $el[0];
        if($el.hasClass('large')){
            if(lpos < el.offsetTop){
                $el.css('margin-top', (lpos - el.offsetTop) + "px");
            }
            lpos += $el.height();
        }else if($el.hasClass('small')){
            if(rpos < el.offsetTop){
                $el.css('margin-top', (rpos - el.offsetTop) + "px");
            }
            rpos += $el.height();
        }
        
    });
});

.container{
    
}
.container > div{
    width:50%;
    box-sizing:border-box;
    position:relative;
}
.container .large{
    height:400px;
    display:inline-block;
    float:left;
    clear:left;
    position:relative;
}
.container .small{
    height:150px;
    display:inline-block;
    float:right;
    clear:right;
    position:relative;
}

.red{background-color:red}
.blue{background-color:blue}
.green{background-color:green}
.yellow{background-color:yellow}
.purple{background-color:purple}
.orange{background-color:orange}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
    
    <div class='large red'></div>
    <div class='small blue'></div>
    <div class='small green'></div>
    <div class='large yellow'></div>
    <div class='small purple'></div>
    <div class='small orange'></div>    
    
</div>

note: I think it would be better to use a div for your "wincontainer" than an ordered list.

Answer 2

I created a js-fiddle with the information you provided, plus a small edit on the margin for the large div, and the layout appears to be behaving the way you want it to.

Here is the example: http://jsfiddle.net/uaeb0Lmv/

I revised the margins as such:

#largediv { 
    margin: 10px 30px 30px; 
}

For some reason, the follow-up top margin didn't override the original declaration. Let me know if that works for you. Otherwise, we may need more info on the div contents.

Answer 3

I understand your problem and i try to solve your problems. You can use this code. It is working.

Live Working Demo

HTML Code

<div id="main">
<div id="one"></div>
<div id="two"></div>

<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>

CSS Code:

#main
{
    height:410px;
    width:450px;
    border:5px solid black;
}

#one
{
    height:150px;
    width:150px;
    background-color:red;
    border:5px solid black;
    position:relative;
    margin-left:20px;
    margin-top:20px;
}
#two
{
    height:150px;
    width:150px;
    background-color:green;
    border:5px solid black;
    margin-top:20px;
    position:relative;
    float:left;
    margin-left:20px;
    margin-top:20px;
}
#three
{
    height:60px;
    width:200px;
    background-color:blue;
    border:5px solid black;
    margin-left:20px;
    margin-top:10px;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:-160px;
}

#four
{
    height:60px;
    width:200px;
    background-color:gold;
    border:5px solid black;
    margin-left:20px;
    margin-top:10px;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:-60px;
}

#five
{
    height:60px;
    width:200px;
    background-color:purple;
    border:5px solid black;
    position:relative;
    float:left;
    display:table-cell;
    margin-top:40px;
    margin-left:-210px;
}

#six
{
    height:60px;
    width:200px;
    background-color:gray;
    border:5px solid black;
    margin-left:-210px;
    margin-top:140px;
    position:relative;
    float:left;
    display:table-cell;
}

Result:

Answer 4

You need to change the id's to classes on your dynamic divs, and then layout the code to flow in div order.

Your css and html worked really.

See the fiddle

http://jsfiddle.net/jwy3c3n5/2/

<div id="container">
    <div id="leftwrapper">
        <div class="large">test<br />test<br />test<br />test<br />test<br /></div>
        <div class="large">testtest<br />test<br />test<br />test<br /></div>
    </div>
    <div id="rightwrapper">
        <div class="small">test</div>
        <div class="small">test</div>
        <div class="small">test</div>
        <div class="small">test</div>
    </div>
</div>


#container {
    width: 500px
}
#rightwrapper {
    float: right;
    width: 35%;
}
#leftwrapper {
    float: left;
    width: 55%;
}
.large {
    background: gray;
    margin-bottom:10px;    
}
.small{ 
    background: gray; 
    margin-bottom:10px;
}

Answer 5

I haven't tried this in a similar stituation, but you could set display:inline-block on largediv and smalldiv. Maybe that would do it.

Edit: and remove the float attribute. But now that i think about it, depending on the order of the divs, this could not be the best solution.