I have a scenario where I have multiple divs ('group') containing text, and there is a floated div ('toggle') in the bottom corner. The current code works well if the text length in 'group' is consistent, but the position of the floated 'toggle' varies due to varying space within different divs. While I could use absolute positioning for the 'toggle' div within 'group', that would hinder text wrapping around it, something I require as the text needs to respect the borders of 'toggle'. So, how can I reliably position 'toggle' in the lower-right corner of my 'group' div regardless of its size? Should I resort to multiple @media calls or is there a more efficient solution? Below is my 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>
Here is the related 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; }
Thank you for your help!
UPDATE: Here's a fiddle demonstrating the issue. I am looking for a solution to keep the green div anchored in the bottom corner of the cyan div, with text wrapping around it regardless of the text length.