CODEWITHSUNDEEP
javascripthtmlcss
Alex
Alex

Reputation: 9429

Prevent float wrapping without specifying width

I have a float: right element that wraps underneath the element to its left when width of browser is narrowed. I would like for the element on left to start wrapping its text instead, so that both elements stay on the same row.

To reproduce the problem please look at the jsfiddle example below. As you size down the output window width you will see the purchase amount wrap below the box.

https://jsfiddle.net/noyabronok/Luqj9xyv/

I pure css solution is preferred.

Upvotes: 0

Views: 48

Answers (3)

Shabai Liu
Shabai Liu

Reputation: 36

Here's a solution without using flex:

https://jsfiddle.net/Luqj9xyv/15/

Mimics a table without actually using a table. I made a change with the HTML to get rid of the ul which I felt was unnecessary.

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115099

Since you're already using flexbox...why not use it throughout?

JSfiddle Demo

#main {
  max-width: 369px;
  border-style: solid;
}
h4 {
  box-sizing: border-box;
  font-size: 15px;
  line-height: 16.5px;
  padding-bottom: 10px;
}
.primary {
  display: flex;
  justify-content: space-between;
}
#myicon {
  padding: 0 15px 0 15px;
  min-width: 12px;
  background: green;
}
ul {
  display: flex;
  line-height: 22.8px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
}
li {
  line-height: 22.8px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
.pull-right {} .primary {
  box-sizing: border-box;
  line-height: 22.8px;
  font-size: 16px;
}
#units {
  display: flex;
  font-size: 11px;
  line-height: 15.7px margin-bottom: 5px;
  margin-left: 22px;
}
<div id="main">
  <h4>Pay with</h4>
  <div class="primary">
    <ul>
      <li><span id="myicon">&nbsp;</span>
      </li>
      <li class="second">Bow Wow Stuff
        <br>You are now a part of our team!!</li>
    </ul>
    <div class="pull-right">£24.89
      <br>
      <label id="units">GBP</label>
    </div>
  </div>
</div>

Upvotes: 2

Jesse Lee
Jesse Lee

Reputation: 1301

Noticed you were already using flex box...

HTML

<div id="main">
    <h4>Pay with</h4>
    <div class="primary">
        <span id="myicon">&nbsp;</span>
        <div class="second"> Bow Wow Stuff<br> You are now a part of our team!!
        </div>
        <div>
          £24.89<br>
          <label id="units">GBP</label>
        </div>
    </div>
</div>

CSS

#main {
  max-width: 369px;
  border-style: solid;
}
h4 {
  box-sizing: boder-box;
  font-size: 15px;
  line-height: 16.5px;
  padding-bottom: 10px;
}

#myicon {
  padding: 0 15px 0 15px;
  min-width: 12px;
  background: green;
}

.primary {
  display:flex;
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px;
}

.second {
  margin-right: 10px;
}

#units {
  font-size: 11px;
  margin-bottom: 5px;
  margin-left: 22px;
}

Upvotes: 0

Related Questions