Why is this text pushing the div onto a new line?

debugcn Published at Dev

Exoon

I have 3 side by side divs but when i put too much text inside the div it pushes it down onto the new line.

.consoleRed {
  background: #d83435;
  border-radius: 5px;
  border: 1px #000 solid;
  color: #fff;
  margin: 5px;
}

.consoleIcon {
  float: left;
}

.consoleDesc {
  float: left;
  vertical-align: top;
}

.consoleDesc h3 {
  margin: 1px;
  padding: 1px;
  font-size: 14px;
}

<div class="container">
  <h2>Select a Console</h2>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Little Text is fine</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">When i add too much text it ends up pushing the whole div onto the new line</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Not sure why</div>
    <div class="clearfix"></div>
  </div>
</div>

https://jsfiddle.net/ud7xbnd7/3/

Louis 'LYRO' Dupont

What you could do is use flexbox. This is perfect to handle side-by-side disposition in CSS.

You can try the following code :

.consoleRed {
  background: #d83435;
  border-radius: 5px;
  border: 1px #000 solid;
  color: #fff;
  margin: 5px;
  display : flex;
}

.consoleDesc {
  float: left;
  vertical-align: top;
}

.consoleDesc h3 {
  margin: 1px;
  padding: 1px;
  font-size: 14px;
}

<div class="container">
  <h2>Select a Console</h2>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Little Text is fine</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">When i add too much text it ends up pushing the whole div onto the new line When i add too much text it ends up pushing the whole div onto the new line When i add too much text it ends up pushing the whole div onto the new line When i add too much text it ends up pushing the whole div onto the new line</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Not sure why</div>
    <div class="clearfix"></div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.