防止文本溢出指定的div

Question

Hello I've occurred this problem twice and I just cannot seem to be able to fix the second problem. The first time it happened with an image and I used max-height,width to prevent it from going out the div once zoomed in but for the footer which includes links it just won't do it.

I've tried position:absolute; aswell and many other answers I've seen from google but I've been stuck on this problem for the past fourty minutes and I am just drawing blanks.

#footer {
    padding-top: 0.5%;
    width: 98%;
    height: 9%;
    padding-left: 1%;
    padding-right: 1%;
    text-align: center;
    background-color: #00FF1E;
}
#footer li {
    max-width: 100%;
    max-height: 100%;
    display: inline;
    padding: 1%;
    background: #7e7e7e; /* Old browsers */
    background: -moz-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7e7e7e), color-stop(34%, #595959), color-stop(60%, #6d6d6d), color-stop(93%, #666666)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* IE10+ */
    background: linear-gradient(to bottom, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#666666', GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 30px;
    word-wrap: break-word;
}
#footer a { display: inline-block; }

HTML:

 <div id="footer">
    <ul>
    <li><a href="home.php" title="homepage"> Homepage </a></li>
    <li><a href="signin.php" title="signin"> Signin </a></li>
    <li><a href="playlist.php" title="playlist"> Playlist </a></li>
    <li><a href="settings.php" title="settings"> Settings </a></li>
    </ul>
 </div>

Answer 1

Try like this: Demo

CSS:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

HTML:

<div id="footer" class="clearfix">...</div>

Source Link