css浮動和邊緣問題在wordpress

Question

我有兩個CSS浮動問題在這個網站（http://melisayavas.com/web），我不明白。第一個是在主頁上。我有兩個JavaScript幻燈片和一個大的空白空間下面。爲什麼？

第二個問題是在新聞頁面 - http://melisayavas.com/web/?page_id=30 - 側邊欄根本不會浮在應該在的位置。再次，我不知道什麼元素停止浮動。

這是header.php中的HTML代碼：

<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> 

而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）。

至於你的問題的第二部分，你目前有這樣的：
div.news-page有寬度：100％，並沒有設置爲浮動。
div.news位於div.news頁面內。
div.news的寬度爲60％。
DIV＃側邊欄設置爲浮動權，有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 
}