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.
How to allow text to spill outside div
Try this:
<div style="width: 20px; white-space: nowrap;">Some text here</div>
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;
}
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;
}
Related Topics
Is There a Reason Why CSS Doesn't Support Ids and Classes, Starting from Numbers
How to Automatically Compile Less into CSS on the Server
Xhtml/Css: How to Make Inner Div Get 100% Width Minus Another Div Width
How to Right Align Div Elements
CSS Div Element - How to Show Horizontal Scroll Bars Only
Right to Left Support for Twitter Bootstrap 3
Override CSS for HTML5 Form Validation/Required Popup
Changing Three.Js Background to Transparent or Other Color
Shorten Verbose CSS That Repeats Combinations of Elements and Pseudo-Classes
CSS Class and Id with the Same Name
Delay Mouseout/Hover with CSS3 Transitions
What Is the Most Practical Way to Check for "@Supports" Support Using Only CSS
Fit Div Size to Background Image