2 уложенных divs рядом с 1 div

Question

Я пытаюсь создать 1 div, у которого есть две сложенные divs рядом с ним с правой стороны. Мне удалось написать следующий код, но я не могу выровнять зеленую рамку под красной рамкой, и в настоящее время она, кажется, выходит за пределы требуемой области.

Мой HTML:

<div id="blue"></div> 
<div id="red"></div> 
<div id="green"></div> 

Мой CSS:

blue { 
width: 100px; 
height: 100px; 
background: blue; 
float: left; 
position: relative; 
} 

#red { 
width: 100px; 
height: 50px; 
background: red; 
float:right; 
} 

#green { 
width: 100px; 
height: 50px; 
background: green; 

float: right; 
clear: both; 
} 

бы очень признателен, если кто-нибудь может пожалуйста, сообщите о том, как я мог это исправить.

Заранее спасибо.

Answer 1

За #green, изменение clear: both; до clear: right;. И вуаля! Посмотрите эту скрипку: http://jsfiddle.net/ru1vpox8/.

Проблема заключалась в том, что очистка перемещала его так, чтобы он располагался ниже обоих красных и синих div. Но, изменяя его, чтобы очистить только справа, он все равно будет находиться на том же уровне, что и синий div, но заставляет его опускаться ниже уровня красного div.

Answer 2

Michael, Возможно, это то, что вы ищете?

.wrapper { 
 
    width: 200px; 
 
} 
 

 
#blue { 
 
width: 100px; 
 
height: 100px; 
 
background: blue; 
 
float: left; 
 
} 
 

 
#red { 
 
width: 100px; 
 
height: 50px; 
 
background: red; 
 
float: left; 
 
} 
 

 
#green { 
 
width: 100px; 
 
height: 50px; 
 
background: green; 
 
float: left; 
 
}

<div class="wrapper"> 
 
    <div id="blue"></div> 
 
    <div id="red"></div> 
 
    <div id="green"></div> 
 
</div>