CSSが浮動小数点数の浮動小数点数の問題

Question

私は理解できないこのウェブサイト（http://melisayavas.com/web）に2つのCSS浮動問題があります。最初のものはホームページ上にあります。私は2つのjavascriptスライドと1つの大きな空のスペースをそれらの下に持っています。どうして？

2番目の問題は、ニュースページのhttp://melisayavas.com/web/?page_id=30です。サイドバーは、単にどこに浮かないのですか。繰り返しますが、どの要素が浮動小数点数を停止しているのか分かりません。

<article class="post" id="post-<?php the_ID(); ?>"> 
     <div class="homepage"> 
      <div class="testimonials"><?php slidedeck(58, array('width' => '500px', 'height' => '550px')); ?> 
      </div> 
      <div class="images"><?php slidedeck(66, array('width' => '400px', 'height' => '550px')); ?> 
      </div> 
     </div> 
    </article> 

これは、関連するCSSです：

article, aside, figure, footer, header, hgroup, nav, section { 
display: block; 
overflow: hidden; 
clear: both; 
} 

.post { 
border: 2px solid; 
border-radius: 10px; 
clear: both; 
overflow: hidden; 
padding: 20px; 
margin-top: 28px; 
} 

.testimonials {position: relative;} 
.images {position:relative;margin-left: 543px; top: -556px; width: 100%;} 

ニュースページのHTML：

<div class="news-page"> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="news"> 
    <article <?php post_class() ?> id="post-<?php the_ID(); ?>"> 
     <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> 
     <?php include (TEMPLATEPATH . '/_/inc/meta.php'); ?> 
     <div class="entry"> 
      <?php the_content(); ?> 
     </div> 
    </article> 
</div> 
<?php endwhile; ?> 
<?php include (TEMPLATEPATH . '/_/inc/nav.php'); ?> 
<?php else : ?> 
    <h2>Not Found</h2> 
<?php endif; ?> 
</div> 

そして

この

はheader.phpの中にHTMLコードですCSS：

.news-page { 
width: 100%; 
    } 

    .news { 
float: left; 
width: 60%; 
    } 
    #sidebar {float: right; width: 30%;} 

Answer 1

最初にfirebug（firefox用）またはChromeを使用することをお勧めします。これは開発ツールが組み込まれているためです。IEにはIE開発ツールもあります。

私はChromeデベロッパーツールを使用しています。サイトのホームページクラスを調べたところ、幅と高さはそれぞれ976pxと1100pxと計算されていました。 .cssファイルを見て、.homepageクラスの高さがどこにも設定されていないことがわかりました。つまり、div要素の高さは1100pxです。これは内容を1100pxに引き伸ばすためです。

あなたdiv.homepageはこれを含んでいます

<div class="slidedeck_frame skin-fullwidth-sexy-black"> 
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px"> 
... 
</dl> 
</div> 

<div class="slidedeck_frame skin-fullwidth-sexy-black"> 
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px"> 
... 
</dl> 
</div> 

高さ550pxのこれら二つの要素それぞれが1100pxの.homepage要素の高さを与えます。

可能な修正は.homepageの高さを直接設定することです（たとえば、700pxまで）。

質問の2番目の部分については、現在 div.news-pageの幅は100％であり、floatに設定されていません。
div.newsはdiv.news-page内にあります。
div.newsの幅は60％です。
のdiv＃サイドバーは右floatに設定し、30％の幅を有している

ソリューション：説明と助けを

.news-page 
{ 
width: 70%; // takes 70% of it's parent element, page-wrap 
float: left; 
} 

.news 
{ 
width: 100%; // takes all space available by it's parent 
} 

#sidebar 
{ 
width: 30%; // takes 30% of it's parent element, page-wrap 
float: right; 
margin-top: 30px; // so it does not cover your navigation bar 
}