css - 左にフロート、右にフロートが機能しない

Question

私のjsfidleでわかるように:

.footer {
  background-image:url('/images/footer_bg.png') bottom repeat-x;
  height: 110px;
}
#footercontent {
  display:table-cell;
  vertical-align: middle;
  height:110px;
}
#leftfoot {
  float: left;
  font-family:maven;
  font-size: 15px;
  padding-left: 20px;
}
#rightfoot {
  float: right;
}

右側にフローティングされた仕切りがページの#rightfoot右側に表示されず、代わりに の横に表示されます#leftfoot。これはなぜですか?

Answer 1

これは#footercontent、表示するように設定されtable-cellていて、親の幅がないために発生しています。その幅は現在、コンテンツによって制御されています。

これを解決するために、table幅 100% で表示するように設定された親仕切りを指定しました。

<div id="footerContainer">
    <div id="footercontent">
        ...
    </div>
</div>

#footerContainer {
    display:table;
    width:100%;
}

コンテンツを右に揃えるために、#rightfoot単純にtext-alignof を与えました:

#rightfoot {
    text-align:right;
}

JSFiddle。