Question

Any ideas on why this code works perfectly in Firefox (that is, if the text is longer than the width it continues below) but in Chrome it doesn’t work? (e.g the text keeps going to the right)

The CSS:

#leftnav {
 width: 18%;
 float: left;
 background-color: #fff;
 margin: 15px 0 0 0;
 margin-left: 5px;
 border: 1px solid #ddd;
 padding: 5px 5px 30px 5px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
}
#leftnav h2 {
 font: normal 17px "Geneva", Helvetica, Arial, Tahoma, Verdana;
 letter-spacing: 0px;
 color: #ff4800;
 margin: 20px 0 5px 10px;
}

The PHP/HTML:

<h2>
<a href="index.php?site=<?php echo urlencode($value);?>"><?php echo $value;?></a>
</h2>

Thank you very much for any input!!!

Answer 1

Use word-wrap: break-word:

#leftnav h2 {
 font: normal 17px "Geneva", Helvetica, Arial, Tahoma, Verdana;
 letter-spacing: 0px;
 color: #ff4800;
 margin: 20px 0 5px 10px;
 word-wrap: break-word;
}

http://jsfiddle.net/7nruR/2/

http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap