genuineillusion
New Member
Consider the code below\[code\]<!DOCTYPE html><html lang="en"> <head> <link href="http://stackoverflow.com//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <style> #block0 { width:400px } #block1, #block2, #block3 { float: left; display:inline; } #block1 { background-color:red; width:48%; height:200px; } #block2 { background-color:blue; width:48%; height:120px; } #block3 { background-color:green; width:48%; height:140px; } </style> </head> <body> <div id="block0"> <div id="block1"></div> <div id="block2"></div> <div id="block3"></div> </div> </body></html>\[/code\]How to make the \[code\]block3(green)\[/code\] block align to the left and make it under the \[code\]block1(red)\[/code\] block, and with the limitations:[*]without adding extra HTML markup[*]if need to apply new css, need to apply to all blocks Example: http://jsfiddle.net/L4VWq/Update: limitations