CODEWITHSUNDEEP
htmlcss
user704565
user704565

Reputation:

CSS Align span to left bottom of div aligned to right

I am trying to align a span to left of a div, which is aligned to right (float: right), but spanalways 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!

Upvotes: 1

Views: 51

Answers (6)

G-Cyrillus
G-Cyrillus

Reputation: 105893

?? late to answer, but what about vertical-align, text-align + inline-block to kick off some float since it is about only phrasing content ? 

* {
  font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial;
}
.mw {
  display: inline-block;
  float: right;
  position: relative;
  text-align: right;
}
.msg {
  background-color: #D80000;
  color: white;
  padding: 0.66em;
  border-radius: 1em;
  display: inline-block;
}
.uns {
  vertical-align: -1em;
  display: inline-block;
}
[style] {overflow:hidden;/* clear in 'n outsider floats */}
<div style="width: 480px; background: yellow; padding: 1em">
  <div class="mw">
    <span class="uns">0</span>
    <div class="msg">Some content</div>
  </div>
</div>
<hr/>
<div style="width: 480px; background: yellow; padding: 1em">
  <div class="mw">
    <span class="uns">10 000 000 00</span>
    <div class="msg">Some content</div>
  </div>
</div>
<hr/>
<div style="width: 480px; background: yellow; padding: 1em">
  <div class="mw">
    <span class="uns">10 000<br/>+ it can wrap too</span>
    <div class="msg">Some content</div>
  </div>
</div>

Upvotes: 0

Jacques Cornat
Jacques Cornat

Reputation: 1642

I would suggest to use flexbox :

.mw {    
  display: flex;
  align-items: flex-end; // Align to the bottom
  // rest of the code
}

Here a demo

Upvotes: 0

Gaurav Gaba
Gaurav Gaba

Reputation: 21

Add " margin-left: -15px; " in .uns class styles.

Upvotes: 0

Mahedi Sabuj
Mahedi Sabuj

Reputation: 2944

If there is no special reason to use position: absolute, You can use this.

.uns {
  position: relative;
  float: left;
  padding-right: 10px;
  margin-top: 20px;
}

FIDDLE DEMO HERE

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 0

Don
Don

Reputation: 1334

Just add left: -20px to your class.

 .uns {
        position: absolute;
        bottom: 0;
        left : -20px;
    }

Have a look at this fidlle. https://jsfiddle.net/y6a77fLp/

Upvotes: 0

Related Questions