Text Goes Out of Div (Css)

text flowing out of div

It's due to the fact that you have one long word without spaces. You can use the word-wrap property to cause the text to break:

#w74 { word-wrap: break-word; }

It has fairly good browser support, too. See documentation about it here.

Text goes out of div (CSS)

As per my comment, you have set white-space: nowrap, which tells the browser to never wrap/break the overflow into a new line. Removing that line will fix your issue.

Text goes outside containing div

Use word-wrap:break-word

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;
    word-wrap:break-word;
}

Text going out of div

  <div id="index">
  <?php
  $select = "SELECT * FROM products LIMIT 0,20";
  $query = mysqli_query ($conn,$select);
  while ($row = mysqli_fetch_array($query)){ 
  $B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
  $M = $row['Model'];$Id = $row['Id'];
  echo "<div class='board' ><a href = 'redirect.php?id=$Id'>   
  <h2>".$B." ".$P." ".$D." ".$M."</h2></a></div>"; 
                                        }
  ?>
  </div>

CSS:

  #index { 
           position:relative;
           top:15px;
           float:left;
           width:482px;
           height:100%;
    }

 .board {  
      background:white;
      position:relative;
      border-radius:15px;
      border-color:#0033FF;
      border-width:1px;
      border-style:solid;       
      margin-top:29px;
      height:198px;
      padding-left:18px;
      padding-right:0px;
      margin-left:0px;
      float:left;
      word-wrap: break-word;
    } 

Overflow-y:scroll is not working, text goes out of div

In #showstarslyrics you should be using a position: relative, not absolute:

#showstarslyrics{
    display:block;
    position:relative;
    left:12%;
    color:red;
}

Updated JSFiddle

---

Related Topics