HTML CSS examples for CSS Widget:Grid
Build Grid with some Boxes only on right Side
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- w w w. j a v a 2s . co m--> display:block; position:relative; margin-bottom:11px; } .quart, .half, .full_in_half { float:left; clear:none; width:24%; margin:0 2%; } span { display:block; height:100px; background:black; } .half { width:49%; } .full_in_half { width:105.16666666666667%; margin:0 0 0 -3.8333333333334%; background:blue; } .full_in_half .half { width:47%; margin:0 3%; } .yellow { background:yellow; } .right { float:right; } .clear { clear:both; width:100%; margin:0; } </style> </head> <body> <div class="yellow"> <div class="quart"> <span></span> </div> <div class="quart"> <span></span> </div> <div class="quart"> <span></span> </div> <div class="quart"> <span></span> </div> <div class="clear"> <!-- --> </div> </div> <div class="yellow"> <div class="half right"> <div class="full_in_half"> <div class="half"> <span></span> </div> <div class="half"> <span></span> </div> <div class="clear"> <!-- --> </div> </div> <div class="clear"> <!-- --> </div> </div> <div class="clear"> <!-- --> </div> </div> </body> </html>