Форматирование веб-страницы Проблема

Question

Я новичок в кодировании и имею проблему HTML/CSS. Страница должна иметь два столбца панелей с одинаковой шириной, но с разной высотой, но когда я пытался дублировать страницу с другим контентом, интервал смещается. Я хочу знать: можно ли изменить таблицу стилей, чтобы иметь правильное форматирование с различными высотами панелей?

Вот некоторые снимки экрана для справки:

Original Page

Duplicated Page

стилей

img { 
    display:block; 
} 

#content2 { 
    margin: 20px auto; 
} 

.article2 { 
    background: #fff; 
    height: 100%; 
    margin: 0px auto 0; 
    padding: 20px 0 40px; 
} 

#section2A { 
    float: right; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 

#header2A { 
    width: 90%; 
    float: left; 
    margin: 0px 0px 30px 50px; 
    color:#333333; 
} 
#section3A { 
    float: right; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 
#header3A { 
    width: 90%; 
    float: left; 
    margin: 0px 0px 30px 50px; 
    color:#333333; 
} 

#section4A { 
    float: right; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 
#header4A { 
    width: 90%; 
    float: left; 
    margin: 0px 0px 30px 50px; 
    color:#333333; 
} 

#section5A { 
    float: right; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 
#header5A { 
    width: 90%; 
    float: left; 
    margin: 0px 0px 30px 50px; 
    color:#333333; 
} 

#section2B { 
    float: left; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 

#img2B { 
} 

#header2B { 
    width: 90%; 
    float: left; 
    margin: 0px 0px 30px 50px; 
} 

#section3B { 
    float: left; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 
#header3B { 
    width: 90%; 
    float: left; 
    margin: 0px 0px 30px 50px; 
    color: #333333; 
} 

#section4B { 
    float: left; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 
#header4B { 
    width: 90%; 
    float: left; 
    margin: 0px 0px 30px 50px; 
    color:#333333; 
} 

#section5B { 
    float: left; 
    margin: 0; 
    width: 500px; 
    overflow: hidden; 
} 
#header5B { 
    width: 90%; 
    float: right; 
    margin: 0px 0px 30px 50px; 
    color: #333333; 
} 

образец страницы

<!--- ROW 1 ---> 
     <div id="section2A"> 

<!--- Left image ---> 
     <img src="images/Cole, Teresa.jpg" 
     width="500px" 
     alt="Teresa Cole"/> 

<!-- image attribution --> 
      <article class="article2"> 
      <h2 id="header2A">Perfect, 2013<p>[Teresa Cole]</p></h2> 
      <p>Influence comes in many forms and when much time is spent with someone their effect is often imperceptible until that presence is no longer here. 

Nothing provokes meditation like absence. 
</p> 
      </article> 
     </div> <!-- section2A --> 

     <div id="section2B"> 

<!---Right image---> 
     <img src="images/collier, aaron.JPG" 
     width="500px" 
     alt="Aaron Collier"/> 

<!-- image attribution -->     

      <article class="article2"> 
       <h2 id="header2B">River Baptism, No. 1, 2004<p>[Aaron Collier]</p></h2><p>Sandy was one of my instructors during graduate school at Tulane, from 2003 until 2005. During this time, I was given the freedom to become enthralled with the formal and communicative possibilities of the painting medium. I began teaching as a Professor of Practice at Tulane starting in 2006, counting Sandy as an accomplished, generous mentor and close friend.</p> 
      </article> 
     </div> <!-- section2B --> 

Answer 1

Попробуйте проверить, имеют ли ваши изображения больший размер, который они предполагают (чтобы остаться в 2 столбцах).

PS: на самом деле вы, похоже, имеете свойство margin-left для дублированной страницы первой колонки. Измените это на 10px меньше, и это shoudl работает.