ワードプレステンプレートのCSS浮動小数点問題

コンテンツエリアがサイドバーの横に浮かないこのサイトで問題が発生しました。
800pxコンテンツの幅。私のコンテンツとサイドバーdivs、paddingなどを追加すると、私は773pxしか考えていません。ワードプレステンプレートのCSS浮動小数点問題

これは2011年のワードプレステンプレートから子テンプレートを作成してから編集しています。

http://www.rogerscomcenter.com/

出典

2011-07-24 Justinrs83

おそらくあなたの問題とは関係ありません。しかし、私はちょうど興味があります：あなたはなぜ使用しています： 'margin：0 0 0 -26.4％;'。マージンはどのようにして負になりますか？ – PeeHaa

このマージンはコンテンツをさらに左に引っ張ります。私はそれが実際にはすでにコンテンツの中でマイナスだったと信じています。私のサイドバーの上部に気がついたら、実際にコンテンツ領域よりも上にコンテンツをプルするために、いくつかのネガティブピクセルのトップマージンがあります。 – Justinrs83

からあなたのCSSを変更し

：これに

.left-sidebar #secondary { 
    float: left; 
    margin-left: 28px; 
    margin-right: 0; 
    width: 235px; 
}

：

.left-sidebar #secondary { 
    float: left; 
    margin-left: 28px; 
    margin-right: 0; 
    position: absolute; 
    width: 235px; 
}

出典

2011-07-24 20:18:15 user860572

ありがとうございます、これは私のコンテンツが正しくフロートするようになりましたが、フッターは今サイドバーの下に重なっています。 – Justinrs83

は、私が追加されたすべての不要な部分を、クリアしてきました。この

.left-sidebar #content { 
    margin: 0 26px; 
    overflow: auto; 
    width: 484px; 
} 

.left-sidebar #primary { 
    float: left; 
    margin: 0; 
} 

#primary { 
    float: left; 
    margin: 0 -26.4% 0 0; 
}

出典

2011-07-24 20:21:27 TheGeekYouNeed

何とか私が何かを忘れていない限り、それが機能するようには思われません。 – Justinrs83

私は何かを逃したかもしれません。 FireBugで正しく表示するように修正しましたが、すべての変更が失われている可能性があります。しかし、それは本当に近いです。 FireBugを使用していますか？ – TheGeekYouNeed

私は、それは私が何かをテストしていたものなので、正しく動作することができません。サイドバーの絶対配置はサイドバーの下端を切ってしまい、あなたの提案は近いものの、コンテンツはまだサイドバーの横には流れません。 – Justinrs83

を試してみてください両方の要素（ 'プライマリ'、 'セカンダリ' div）に浮動小数点数と幅を設定します。すべてが大丈夫です。

http://imageshack.us/photo/my-images/804/rogerscenterforcommerce.jpg/

出典

2011-07-24 20:24:39

ワードプレステンプレートのCSS浮動小数点問題

答えて

関連する問題