CODEWITHSUNDEEP
htmlcss
Dharman
Dharman

Reputation: 33375

How to make floating label of the text?

I am trying to make a box with a few sections of text. Each section will have a floating label on the left of it. However I have encountered a problem where the end of the text overflows onto the next section.
Is there a way to prevent this?

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-block;
    width: 100%;
    flex: 0 1 auto;
}
.punktSecLabel {
    float: left;
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}
<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div>John Doe
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Upvotes: 0

Views: 108

Answers (3)

Whatatimetobealive
Whatatimetobealive

Reputation: 1353

I suggest just use inline-flex and put your content inside a <p> or <div> element otherwise it will break.

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-flex;
    width: 100%;
    flex: 0 1 auto;
}
.punktSecLabel {
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}
<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i></div>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div><div>John Doe</div>
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>

Upvotes: 1

mdubus
mdubus

Reputation: 130

Your problem is that you had a float:left on your punktSecLabel. Just remote it, and add a display:flex; on your punktSection. Your content must also be wrapped in a bigger div.

Hope it helps !

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-block;
    width: 100%;
    flex: 0 1 auto;
    display:flex;
}
.punktSecLabel {
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}
<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i></div>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div>John Doe
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42354

Instead of display: inline-block on your .punktSection and .punktSectionHalf, you're looking for display: inline-flex:

.punktBox {
    width: 550px;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    flex-wrap: wrap;
}

.punktSection, .punktSectionHalf {
    font-size: 1em;
    padding: 2px 10px;
    min-height: 24px;
    display: inline-flex;
    width: 100%;
    flex: 0 1 auto;
}
.punktSecLabel {
    float: left;
    height: 100%;
    min-width: 100px;
    font-weight: bold;
}
<div class="punktBox">
  <div class="punktSection">
    <div class="punktSecLabel">Desc: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i>
  </div>
  <div class="punktSectionHalf">
    <div class="punktSecLabel">Person: </div>John Doe
  </div>
  <div class="punktSection">
    <div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Upvotes: 0

Related Questions