html - 流動的なレイアウトでのフッターの実装

Question

ウェブサイトのフッターの実装に問題があります。以下のコードでわかるように、で
2 つの<ul>リストを取得しました。inner_footerしかし、ズームインすると<ul>、div 要素のリストが表示されません。フロートの問題のようですが、何が問題なのかわかりません。

HTML:

<div class="grid_16">
    <div class="footer">
        <div class="inner_footer">
            <ul>
                <li>Some content</li>
            </ul>
        <div>
            <ul>
                <li><a>Link 1</a></li>
                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
                <li><a>Link 4</a></li>
                <li><a>Link 5</a></li>
                <li>Copyrights</li> 
            </ul>   
        </div>
    </div>
</div>

CSS:

.footer {
    height:105px;
    position:relative;
    top:0;
    width:100%;
  }
.inner_footer {
    background:url(../images/layout_img/nav.jpg) 0 center repeat-x;
    font-size:12px;
    border-radius:4px;
    position:relative;
    width:inherit;
    height:31px;
    margin:0 auto;
}
.inner_footer ul {
    margin:0;
}
.inner_footer ul li {
    color:#FFF;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}
.inner_footer ul li a img {
    margin:2px 0 0 20px;
}
.inner_footer ul li a {
    color:#FFF;
    float:left;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}
.inner_footer div {
    float:right;
}
.inner_footer div ul li a {
    color:#FFF;
    float:left;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}
.inner_footer div ul li {
    color:#FFF;
    float:left;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}

Answer 1

問題はあなたのhtmlコードにあると思います。div 要素を閉じるのを忘れました。コードは次のようになります。

<div class="grid_16">
    <div class="footer">
        <div class="inner_footer">
            <ul>
                <li>Some content</li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a>Link 1</a></li>
                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
                <li><a>Link 4</a></li>
                <li><a>Link 5</a></li>
                <li>Copyrights</li> 
            </ul>   
        </div>
    </div>
</div>