When I dynamically generate a bunch of divs with long text that wraps, the floating delete icon ends up at the bottom. Although it's acceptable, I prefer not to use absolute positioning and would like to adjust the width based on the container.
Take note that the width is static in this example, but it varies based on the container in my actual usage. As a last resort, I may resort to using absolute positioning if necessary.
Check out the issue I'm facing in this example.
<div class="deletableGroup">Marketing Department
<img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png"/>
</div>
<div class="deletableGroup">Sales
<img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png"/>
</div>
CSS:
.deletableGroup img {
padding-left: 5px;
padding-top: 2px;
cursor: pointer;
float: right;
}
.deletableGroup {
width: 125px;
padding: 2px;
border: solid 2px lightskyblue;
background-color: #F5F5F5;
border-radius: 5px;
margin: 3px;
display: inline-block;
}