CODEWITHSUNDEEP
css
clarkk
clarkk

Reputation: 27689

drop float div to next line if too wide

I have a box with key-value pair information.. If the value box is too wide and meets the key box then the value box must drop down under the key box

https://jsfiddle.net/nwpems8w/

The value on the third line must drop down under the key box? How to do that?

.box {
  background: #aaa;
  width: 150px;
}
.box_prop {
  clear: both;
  text-align: right;
}
.box_key {
  float: left;
}
.box_value {
  font-weight: bold;
}
<div class="box">
  <div class="box_prop">
    <div class="box_key">key</div>
    <div class="box_value">value</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key long</div>
    <div class="box_value">value long</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key giga long</div>
    <div class="box_value">value giga long</div>
  </div>
</div>

Upvotes: 1

Views: 46

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can do this with Flexbox, just use flex-wrap: wrap on .box_prop

.box {
  background: #aaa;
  width: 150px;
}
.box_prop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box_value {
  font-weight: bold;
}
.box_value {
  margin-left: auto;
}
<div class="box">
  <div class="box_prop">
    <div class="box_key">key</div>
    <div class="box_value">value</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key long</div>
    <div class="box_value">value long</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key giga long</div>
    <div class="box_value">value giga long</div>
  </div>
</div>

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

Use float: right on .box-value and set layout on parent.

.box_value {
    float: right;
}


.box {
  background:#aaa;
  width:150px;
}

.box_prop {
  overflow: hidden;
}

.box_key {
  float:left;
}

.box_value {
  font-weight:bold;
  text-align: right;
  float: right;
}
<div class="box">
  <div class="box_prop">
    <div class="box_key">key</div>
    <div class="box_value">value</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key long</div>
    <div class="box_value">value long</div>
  </div>
  <div class="box_prop">
    <div class="box_key">key giga long</div>
    <div class="box_value">value giga long value giga longvalue giga long</div>
  </div>
</div>

Upvotes: 1

Related Questions