float test

by jpeter06

HTML

<div class="splitter" style="width:100%; height:100%;">
	<div class="splitter left" style="width:50%; height:100%;">
		<div class="empty" style="width:100%; height:50%;"></div>
		<div class="splitter" style="width:100%; height:50%;">
			<div class="splitter" style="width:100%; height:50%;">
				<div class="empty left" style="width:50%; height:100%;"></div>
				<div class="empty left" style="width:50%; height:100%;"></div>
			</div>
			<div class="splitter" style="width:100%; height:50%;">
				<div class="empty left" style="width:50%; height:100%;"></div>
				<div class="empty left" style="width:50%; height:100%;"></div>
			</div>
		</div>
	</div>
	<div class="splitter left" style="width:50%; height:100%;">
		<div class="splitter" style="width:100%; height:50%;">
			<div class="splitter left" style="width:50%; height:100%;">
				<div class="empty" style="width:100%; height:50%;"></div>
				<div class="empty" style="width:100%; height:50%;"></div>
			</div>
			<div class="splitter left" style="width:50%; height:100%;">
				<div class="empty" style="width:100%; height:50%;"></div>
				<div class="empty" style="width:100%; height:50%;"></div>
			</div>
		</div>
		<div class="empty" style="width:100%; height:50%;"></div>
	</div>
</div>

CSS

html, body{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    white-space-collapsing:discard;
}

div { white-space-collapsing:discard;
    display:table;  
    border:0px solid  black; }

.left { float:left;}

.green { background:green;}
.blue { background:blue;}
.orange{ background:orange;}
.rojo { background:#f00}
.c2 { background:#0ff}


.p100x100{width:100%;height:100%;}
.p100x50{width:100%;height:50%;}
.p50x100{width:50%;height:100%;}

.b1x1{ width:10%; height:10%;}
.b1x2{ width:10%; height:20%;}
.b2x1{ width:20%; height:10%;}
.b2x2{ width:20%; height:20%;}
.b3x1{ width:30%; height:10%;}
.b1x3{ width:10%; height:30%;}

JavaScript

$(function(){
    $('div','.splitter').each(        
        function(index){
            var colors=['green','blue','orange','rojo','c2'];
            $(this).addClass(colors[index%colors.length])}
    );
    
});