Как создать выравнивание в верхнем левом углу?

Question

Чтобы лучше понять, вот пример:

jsFiddle

HTML:

<div id="a">AAAAAAA</div> 
<div id="b">BBBBBBB</div> 
<div id="c">CCCCCCC</div> 
<div id="d">DDDDDDD</div> 

CSS:

div { display:block; position:relative; float:left; } 
#a { width:25%; height:100px; background-color:#ff00ff; } 
#b { width:25%; height:100px; background-color:#ffff00;} 
#c { width:25%; height:100px; background-color:#FF0000;} 
#d { width:25%; height:400px; background-color:#CCCCCC;} 
#e { width:150px; height:50px; background-color:#00FF00;} 

Зеленая коробка должна соответствовать чуть ниже фиолетовую коробку.

---

В реальном мире У меня есть сценарий, который создает квадратную форму, как это:

real world

Последние две коробки, они будут выравнивать себя в оставшееся пространство (пространство там и отлично рассчитан).

Ограничения:

• Я не могу изменить порядок коробки
• HTML, должен оставаться как это
• Я не могу добавить абсолютные позиции (с верхним/правым/нижним/левым положением)

Возможно ли это?

Спасибо!

Answer 1

Если вы знаете высоту ящиков, вы можете использовать margin-top.

Fiddle: https://jsfiddle.net/AtheistP3ace/g112qw6z/3/

#d { 
    width:50%; 
    height:100px; 
    background-color:#00FF00; 
    margin-top: -100px; 
} 

Или используйте float.

Fiddle: https://jsfiddle.net/AtheistP3ace/g112qw6z/4/

#c { 
    width:50%; 
    height:200px; 
    background-color:#FF0000; 
    float: right; 
} 

Answer 2

Добавить float: right; в свой #c ID.

jsFiddle DEMO

HTML:

<div id="a">AAAAAAA</div> 
<div id="b">BBBBBBB</div> 
<div id="c">CCCCCCC</div> 
<div id="d">DDDDDDD</div> 

CSS:

div { display:block; position:relative; float:left; } 
#a { width:25%; height:100px; background-color:#ff00ff; } 
#b { width:25%; height:100px; background-color:#ffff00;} 
#c { width:50%; height:200px; background-color:#FF0000; float: right;} 
#d { width:50%; height:100px; background-color:#00FF00;}