Left margin on a floating right div

user_12985747 0
Viewed 55

Given:

.meta-div {
  box-shadow: 0 0 25px  rgba(0, 0, 0, 0.4);
  border-radius: 0.5em;
  width: 15rem;
}
.outer-div {
  overflow: hidden;
  background-color: black;
  color: white;
  white-space: nowrap;
  text-align: right;
  
  margin-left: 20px;
}

.inner-div {
  /* padding-left: 20px; */
  float:right;
}
<div class="meta-div">
  <div class="outer-div">
    <div class="inner-div">
      111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999
    </div>
  </div>
</div>

with a JS Fiddle link.

I am trying to add a margin-left to the text and produce the following output:

enter image description here

I need to have the float:right property since I require the overflowed text to be to the left of the textbox.

I searched online extensively for this problem and found out that one can not add a margin property to a floating div, and that I should add to its container instead, but I am just really not sure what trick I could use to mimic the picture above.

I tried creating other sub/outer divs (for the inner-div class) and spreading the properties of float and margin-left across them, I also tried adding some relative/absolute properties, but all in vain. I have been stuck on this for 6 hours.

Does anyone have any tips or ideas ?

css-float margin css html
1 Answers

You can use border-left:

.meta-div {
  box-shadow: 0 0 25px  rgba(0, 0, 0, 0.4);
  border-radius: 0.5em;
  width: 15rem;
}
.outer-div {
  overflow: hidden;
  background-color: black;
  color: white;
  white-space: nowrap;
  text-align: right;
  border-left:22px solid black;
}

.inner-div {
  /* padding-left: 20px; */
  float:right;
}
<div class="meta-div">
  <div class="outer-div">
    <div class="inner-div">
      111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999
    </div>
  </div>
</div>

user_142512210
Related