clarkk clarkk - 6 months ago 24
CSS Question

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>




Answer

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>

Comments