box se pasa del margen

[marcoss2009]

hola!
necesito ayuda, hice un box para meter contenido pero cuando hay un texto muy largo, el box se pasa del margen:



intente ponerle un height pero sigue igual, les paso el codigo css:

Código PHP:

  .abouttablehead {
    background-image: url("../images/tpbk5289.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    border-left: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
    border-top: 1px solid #D4D4D4;
    color: #DA7146;
    font: bold 16px Arial,Helvetica,sans-serif;
    height: 55px;
    padding: 5px 0 0 5px;
    vertical-align: top;
}
.abouttabletext {
    border-bottom: 1px solid #D4D4D4;
    border-left: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
    font-family: Verdana,Arial,Georgia,serif;
    font-size: 13px;
    padding: 0 10px 20px;
}
.imagen{
border: 1px solid #ccc;
padding: 2px 2px 2px 2px;
float: left;
}
.imagen:hover{
border: 1px solid #000;
padding: 2px 2px 2px 2px;
float: left;
}
.megustajaja {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("../images/bfs.gif") repeat-x scroll left bottom #FAFAFA;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-radius: 0 0 5px 5px;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #E9E9E9 !important;
    box-shadow: 0 2px 3px #EEEEEE;
    float: left;
    height: 32px;
    margin-left: 78px !important;
    position: relative;
    width: 614px;
    word-wrap: break-word;
}
.megustajaja .date {
    float: left;
    font-weight: normal;
    margin: 0 !important;
    padding-top: 4px;
}
.megustajaja a:hover {
    text-decoration: none;
}
.butonsitomarcosxd {
    color: #666666;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    padding: 7px 10px 0 14px;
}
.clickear {
    border-radius: 0 3px 3px 0;
    color: #666666;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 20px;
    line-height: 21px;
    padding: 0 4px;
    position: relative;
}
.clickear {
    background: url("../images/clickear.png") no-repeat scroll left bottom transparent;
    float: left;
    height: 27px;
    margin: 0;
    padding: 5px 5px 0 0;
}
.botonsitodemegusta {
    color: #7F7F7F;
    float: right;
}
.botonsitodemegusta a {
    color: #B2B2B2;
} 
   

y html:

Código PHP:

  <table width="55%" cellspacing="0" cellpadding="0">
<tbody><tr><td class="abouttablehead">
<div><b>Escrito por '.$usuariomuro['nombre'].' '.$usuariomuro['apellido'].' el '.$muro['fecha'].'</b></div></td></tr>
<tr><td class="abouttabletext">
<a href="'.$url.'/profile.php?id='.$usuariomuro['id'].'" style="text-decoration: none;"><img src="'.$usuariomuro['image'].'" width="60" class="imagen"></a><div style="margin-left: 80px;">
'.$muro['mensaje'].'
<br></div>
</span></div></td></tr>
</tbody></table>
<div class="clearfix megustajaja">
        <div class="date-icon">
 
        </div><a href="/posts/tv-peliculas-series/13885351.ultima/The-Finder-Temporada-1-_Post-Actualizable_-HDTV-y-720p.html" style="float: right; text-decoration: none; font-family: Klavika Regular; font-size: 14px; padding-left: 15px; padding-right: 15px;" class="botonsitodemegusta butonsitomarcosxd clickear">Comentar</a><a onclick="window.open(this.href, this.target, \'width=400px,height=400px\'); return false;" href="http://190.97.43.76/acciones/compartirpub.php?id=101" style="float: right; text-decoration: none; font-family: Klavika Regular; font-size: 14px; padding-left: 15px; padding-right: 15px;" class="botonsitodemegusta butonsitomarcosxd clickear">Compartir</a><a href="http://190.97.43.76/acciones/nomegustapub.php?id=101" style="float: right; text-decoration: none; font-family: Klavika Regular; font-size: 14px; padding-left: 15px; padding-right: 15px;" class="botonsitodemegusta butonsitomarcosxd clickear">Ya no me gusta</a></div> 
   

gracias

[Naahuel]

El problema es con las palabras demasiado largas aparentemente. Si usás espacios seguramente eso no pasa. Es poco probable que pase, pero si te querés resguardar, podés usar este código que "rompe" las palabras si se pasan del ancho:

Código CSS:

.contenedor{
  width: 300px; /* Cambialo por el ancho que necesites */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}