Как использовать float в div с переменным пространством

Question

У меня есть серия div ("группа") с текстом в нижнем углу и плавающим div ("toggle"). Код, который у меня есть, работает, если текст внутри 'группы' имеет определенную длину, но, поскольку пространство внутри варьируется между элементами div, перемещаемая позиция 'toggle' также работает. Я мог бы установить div 'toggle' как абсолютно позиционированный элемент внутри 'group', но тогда текст не будет обтекать его (и мне нужно, чтобы текст соблюдал границы 'toggle'). Итак, как я могу расположить "переключатель" в правом нижнем углу моего "группового" div, независимо от размера? Должен ли я просто сделать несколько звонков @media, или есть лучший способ сделать это? Вот мой HTML:

<div class="group">
<p class="grouptitle"><a href="#">Name of group goes here</a></p>
<p class="grouptext">Brief description of group goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut  nisl ut aliquip isl isi enim ad</p>
<div class="toggle"></div>
</div>

И вот мой CSS:

.group {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 300px;
  height: 300px;
  min-height: 300px;
  min-width: 300px;
  padding: 10px;
  margin: 12px;
  background-color: cyan;
  vertical-align: top; }

.toggle {
  float: right;
  width: 50px;
  height: 50px;
  background-color: green;
  bottom: 0;
  margin-right: -10px;
  margin-top: 32px; }

Спасибо за прочтение!

РЕДАКТИРОВАТЬ: Вот скрипка. Мне нужно сделать так, чтобы зеленый div оставался в нижнем углу cyan div независимо от текста внутри cyan div и с текстом, оборачивающимся вокруг зеленого div.

Answer 1

Если я правильно читаю вашу проблему, я думаю, что с помощью:

position: absolute;
bottom:0;
right:0;

Решил бы это. Вот скрипка, чтобы показать вам, о чем я говорю. - http://jsfiddle.net/fishgraphics/b2LxU/13/