爲什麼在調整瀏覽器窗口大小時，這些div不會彼此相鄰？

Question

我在調整瀏覽器窗口的大小時，並不會彼此相鄰，所以我遇到了一個問題。當窗寬，div的坐好彼此相鄰，但是當你調整窗口較窄的分辨率，右邊的div的，一個在左邊下雲： http://jsfiddle.net/za5X7/

我想有#sitelatestposts覆蓋寬度空間的55％，並覆蓋其餘部分。

<div class="homepagediv"> 
    <div class="panel-grid-cell" id="sitelatestposts"> 
      <h1 class="blogtitle">Recent posts</h1> 
      <ul> 
       <li><a href=#><h5>Title 1</h5><p>Lorem ipsum</p></a></li> 
       <li><a href=#><h5>Title 2</h5><p>Lorem ipsum</p></a></li> 
       <li><a href=#><h5>Title 3</h5><p>Lorem ipsum</p></a></li> 
      </ul> 
    </div> 
    <div class="panel-grid-cell" id="siteinfos"> 
      <h1>About the author</h1> 

     <p>Contact 555-215-5548</p> 
     <p>Lorem ipsum</p> 

    </div> 
</div> 

CSS：

.homepagediv { 
    zoom: 1; 
    width: 100%; 
} 
.homepagediv h1, .homepagediv h2, .homepagediv h3, .homepagediv h4, .homepagediv h5, .homepagediv h6 { 
    clear: none; 
} 
.panel-grid-cell { 
    margin: 0 auto; 
    padding: 0; 
    float: left; 
} 
.blogtitle { 
    padding: 0 0 0 10px; 
    margin:0.5em 0 22px 0; 
} 
#sitelatestposts { 
    width: 55%; 
} 
#sitelatestposts ul { 
    padding: 0; 
    list-style-type: none; 
} 
#sitelatestposts h5 { 
    font-size: 14px; 
} 
#siteinfos { 
    margin-right:10px; 
} 

你知道如何解決這一問題？ 謝謝！

Answer 1

只要指定你的#siteinfos寬度，它會起作用。

在這種情況下，如果您爲#sitelatestposts指定55％，則您可以爲#siteinfos指定35％（合計爲90％）。

當你這樣做時，你可以保留你的保證金。

但是，如果您爲#siteinfos指定45％並保持右邊距，則這將超過100％（100％+ 10px），因此它們不會彼此相鄰。

Answer 2

添加

width:35%; 

到#siteinfos {}

這應該等於100％（含55％要#sitelatestposts）

http://jsfiddle.net/za5X7/5/

Answer 3

我剛剛刪除了#siteinfos的margin-right並將寬度設置爲45％。

#siteinfos { 
width:45%; 
margin-right:0; } 

頁邊空白可能會導致換行並且因爲它是float：left;元素，我看不到任何理由留下一個保證金權利，如果你仍然需要它，嘗試在該div內的元素中設置填充權，所以它將始終保持正確的大小和對齊。

編輯：FIDDLE HERE