在無表網頁設計中存在對齊div的問題

Question

我試圖創建一個具有表格佈局但不使用表格元素的網頁。我遇到的問題是，只要我將文本添加到任何div，佈局就會改變。我不知道爲什麼會發生這種情況。下面附上的是代碼。它是僅包含div和純文本的佈局的簡化版本。我有顏色編碼的divs，使每個突出。

此代碼中的兩個版本是相同的。唯一的區別是第二個文本添加了文本。注意添加文本時div如何向下移動。有沒有人有解決這個問題的原因？

預先感謝您可能能夠給我的任何幫助。

PeteM

* CSS *

.content { 
      margin: 0px auto; /*center the content all browsers except IE*/ 
      text-align: center; /*center the content IE*/ 
      width: 1212px; 
    } 
    body { background-color:yellow; } 
    .table{ display: table; width: 1212px; } 
    .row-one { display: table-row; width: 1212px; } 
    .column-one { display: table-cell; width: 256px; } 
    .column-two { display: table-cell; width: 956px; } 
    .image-one { 
      height: 256px; 
      width: 256px; 
      background-color:red; 
    } 
    .image-two { 
      height: 256px; 
      width: 256px; 
      background-color:green; 
    } 
    .image-three { 
      height: 256px; 
      width: 256px; 
      background-color:purple; 
    } 
    .image-four { 
      height: 256px; 
      width: 256px; 
      background-color:tan; 
    } 
    .image-five { 
      height: 256px; 
      width: 256px; 
      background-color:maroon; 
      float:right; 
    } 

    .top-middle { 
      background-color:pink; 
      width: 700px; 
      height: 256px;    
    } 
    .bottom-right { 
      width: 956px; 
      height: 768px; 
      background-color:blue; 
    } 

HTML *

<div class="content"> 
     <header> 
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
     </header> 
     <div class="table"><!--table--> 
      <div class="row-one"><!--table row 1--> 
       <div class="column-one"><!--table COL 1--> 

        <div class="image-one"></div> 

        <div class="image-two"></div> 

        <div class="image-three"></div> 

        <div class="image-four"></div> 

       </div><!--END table COL 1--> 
       <div class="column-two"><!--table COL 2--> 

        <div class="image-five"></div> 

        <div class="top-middle"> 

        Welcome to My Home on the Web!<br />  
        <br /> 
        I am a Multimedia Computer Programmer and Web Designer and I am currently living in New York City.<br />  
        <br /> 
        Hello to all of the visitor's to this site. It is designed to be a place to view all of my current projects.<br /> 
        <br />  
        Below are links to games and multimedia projects that I have recently created... 
        </div> 

        <div class="bottom-right"> 

         list item 1<br /> 
         list item 2<br /> 
         list item 3<br /> 
         list item 4<br /> 
         list item 5<br /> 

        </div>    
       </div><!--END table COL 2--> 
      </div><!-- END table row 1--> 
     </div><!--END table--> 
     <footer> 
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
     </footer> 
    </div> <!-- END content --> 

* HTML W/O文本

<div class="content"> 
     <header> 
     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
     </header> 
     <div class="table"><!--table--> 
      <div class="row-one"><!--table row 1--> 
       <div class="column-one"><!--table COL 1--> 

        <div class="image-one"></div> 

        <div class="image-two"></div> 

        <div class="image-three"></div> 

        <div class="image-four"></div> 

       </div><!--END table COL 1--> 
       <div class="column-two"><!--table COL 2--> 

        <div class="image-five"></div> 

        <div class="top-middle"></div> 

        <div class="bottom-right"></div> 

       </div><!--END table COL 2--> 
      </div><!-- END table row 1--> 
     </div><!--END table--> 
     <footer> 
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
     </footer> 
    </div> <!-- END content --> 

* 使用HTML表元素 下面是使用表元素在同一頁面。注意divs如何正確排列，即使它們中有文本。無論這個問題是可能與display：table屬性有關。用這種方式編寫代碼，除了兩列之間有邊框間距之外，一切看起來都正確。我不確定是什麼原因造成的。

<div class="content"> 
     <header> 
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
     </header> 
     <table><!--table--> 
      <tr><!--table row 1--> 
       <td><!--table COL 1--> 

        <div class="image-one"></div> 

        <div class="image-two"></div> 

        <div class="image-three"></div> 

        <div class="image-four"></div> 

       </td><!--END table COL 1--> 
       <td><!--table COL 2--> 

        <div class="image-five"></div> 

        <div class="top-middle"> 

        Welcome to My Home on the Web!<br />  
        <br /> 
        I am a Multimedia Computer Programmer and Web Designer and I am currently living in New York City.<br />  
        <br /> 
        Hello to all of the visitor's to this site. It is designed to be a place to view all of my current projects.<br /> 
        <br />  
        Below are links to games and multimedia projects that I have recently created... 
        </div> 

        <div class="bottom-right"> 

         list item 1<br /> 
         list item 2<br /> 
         list item 3<br /> 
         list item 4<br /> 
         list item 5<br /> 

        </div>    
       </td><!--END table COL 2--> 
      </tr><!-- END table row 1--> 
     </table><!--END table--> 
     <footer> 
      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
     </footer> 
    </div> <!-- END content -->