jakubinf jakubinf - 6 months ago 23
HTML Question

CSS Align span to left bottom of div aligned to right

I am trying to align span to left of div, which is aligned to right (float: right), but result span is always appears to collide with div



* {
font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial;
}
.mw {
display: inline-block;
float: right;
position: relative;
}
.msg {
float: right;
background-color: #D80000;
color: white;
padding: 0.66em;
border-radius: 1em;
}
.uns {
position: absolute;
bottom: 0;
}

<div style="width: 480px; background: yellow; padding: 1em">
<div class="mw">
<span class="uns">0</span>
<div class="msg">Some content</div>
<br style="clear: both">
</div>
<br style="clear: both">
</div>





This is what I want to get

This is what I want to reach

** EDIT: Using negative left is not a solution, content of span can vary, so at bigger number it will again screw up and collide!

Answer

You can use transform: translateX(-100%) and move span to left equal to its width.

* {
  font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial;
}
.mw {
  display: inline-block;
  float: right;
  position: relative;
}
.msg {
  float: right;
  background-color: #D80000;
  color: white;
  padding: 0.66em;
  border-radius: 1em;
}
.uns {
  position: absolute;
  bottom: 0;
  transform: translateX(-100%);
}
<div style="width: 480px; background: yellow; padding: 1em">
  <div class="mw">
    <span class="uns">0</span>
    <div class="msg">Some content</div>
    <br style="clear: both">
  </div>
  <br style="clear: both">
</div>