Cannot get divs in one row when long content in one of them

Question

I've got two divs in one row with float left and right. When one of them get the long content it overflow another. I want it respecting the second div and get several lines when it has not enough space and get my second div vertical centered when the first div get bigger height.

enter image description here

.item {
  background: white;
  width: 91%;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
}

.content-container {
  float: left;
  background: yellow;
}

.buttons {
  float: right;
  background: green;
}

<div class="item">
  <div class="content-container">
    <p>Buy groceries</p>
  </div>
  <div class="buttons">
    <button class="btn-done">
      <i class="fa fa-check" aria-hidden="true"></i>
    </button>
    <button class="btn-delete">
      <i class="fa fa-trash" aria-hidden="true"></i>
    </button>
  </div>
</div>

It seems you have a problem with your code. However, we can't help unless we have [code or information that can reproduce the problem](//stackoverflow.com/help/mcve). Otherwise, we are just blindly guessing. — Blue, Jan 09 '18 at 20:21

orabis · Accepted Answer · 2018-01-09T21:09:24.697

You can set a max width to the text container. Make sure to use break word in the p tag.

   .content-container {
      float: left;
      background: yellow;
      max-width: calc(100% - 80px);
    }

.content-container p{
  word-wrap: break-word;
}

.item {
  background: white;
  width: 91%;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
}

.content-container {
  float: left;
  background: yellow;
  max-width: calc(100% - 80px);
}

.content-container p{
  word-wrap: break-word;
}


.buttons {
  float: right;
  background: green;
}

<div class="item">
  <div class="content-container">
    <p>Buy groceries1111111111111111111111111111111111111111111111111111111111111111111111111</p>
  </div>
  <div class="buttons">
    <button class="btn-done">
            <i class="fa fa-check" aria-hidden="true"></i>
          </button>
    <button class="btn-delete">
            <i class="fa fa-trash" aria-hidden="true"></i>
          </button>
  </div>
</div>

Edit

In order to vertically align the buttons, you can use the flex display, since you are using float. A new snippet is added. The changes are follows.

.item{
  display: flex;
  align-items: center;
}

.buttons {
  float: right;
  margin-left: auto;
  background: green;
}

.item {
  background: white;
  width: 91%;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
  display: flex;
  align-items: center;
}

.content-container {
  float: left;
  background: yellow;
  max-width: calc(100% - 80px);
}

.content-container p {
  word-wrap: break-word;
}

.buttons {
  float: right;
  margin-left: auto;
  background: green;
}

<div class="item">
  <div class="content-container">
    <p>Buy groceries1111111111111111111111111111111111111111111111111111111111111111111111111</p>
  </div>
  <div class="buttons">
    <button class="btn-done">
            <i class="fa fa-check" aria-hidden="true"></i>
          </button>
    <button class="btn-delete">
            <i class="fa fa-trash" aria-hidden="true"></i>
          </button>
  </div>
</div>

and how can I center the second div vertically? – fxvlad Jan 09 '18 at 20:47 — fxvlad, Jan 09 '18 at 20:47

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

With flexbox

E.g, set the first flex-item width to 90% and the second flex-item to 10%. Set a min width (width of the two buttons) for the second flex item, so that the buttons don't get stacked.

Example

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.item {
  background: white;
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
  font-size: 14px;
  color: #424242;
  overflow: auto;
}

.item>div:nth-child(1) {
  background: yellow;
  width: 90%;
}

.item>div:nth-child(2) {
  background: yellow;
  min-width: 40px;
  padding-left: 5px;
  width: 10%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

<div class="item flex">
  <!-- First flex item -->
  <div>very long text very long text very long text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, praesentium omnis, iusto eveniet ut, harum commodi distinctio cumque animi quae eaque culpa repellat? Dolores voluptatem minus sit aperiam
    expedita corporis.</div>
  <!-- Second flex item and is also flex-direction: column for vertical centering -->
  <div>
  <!-- The following div is a flex column, which is vertically centered -->
    <div>
      <button class="btn-done">
        <i class="fa fa-check" aria-hidden="true"></i>
      </button>
      <button class="btn-done">
        <i class="fa fa-check" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</div>

Hints

How to vertically align text inside a flexbox?

do the all browsers support that property? – fxvlad Jan 09 '18 at 20:52 — fxvlad, Jan 09 '18 at 20:52

score 0 · Answer 3 · answered Jan 09 '18 at 20:57

.item{
  display: flex;
  justify-content: space-between;
 background: white;
 width: 91%;
 margin: 10px auto 0;
 padding: 14px;
 border-radius: 5px; 
 box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
 font-size: 14px;
  color: #424242;
  overflow: auto;
}

.content-container{
  background: yellow;
}

.buttons{
  background: green;
}

<div class="item">
        <div class="content-container">
          <p>Buy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceriesBuy groceries</p>
        </div>
        <div class="buttons">
          <button class="btn-done">
            <i class="fa fa-check" aria-hidden="true"></i>
          </button>
          <button class="btn-delete">
            <i class="fa fa-trash" aria-hidden="true"></i>
          </button>
        </div>
      </div>

Cannot get divs in one row when long content in one of them

3 Answers3

Example