<html>
    <head>
        <meta charset='utf-8'>
        <title>title</title>
    </head>
    <body>
        <div style='
            background-color: #999999; 
            padding: 10px;'>
            <div style='
                background-color:red;
                width:100px;
                height:100px;
                float:left;'>1
                </div> 
            <div style='
                background-color:blue;
                width:50px;
                height:50px;
                float:left;'>2
                </div>
            <div style='clear:left;'></div>
        </div>
    </body>
</html>
как выравнить синий див относитльно красного. Чтобы получилось как на втором рисунке