Абсолютное позиционирование в относительно позиционированном элементе отказывается работать

Question

Я, вероятно, упустил что-то вопиющее здесь, но это сводит меня с ума.

Страница в вопросе home page of this test site.

• заголовок идентификатор позиционирован относительно, и я пытаюсь абсолютно позиционирование элементов внутри него (фотографии двух людей и текст рядом с этими фотографиями, # bodyad1 и # bodyad2).

• Проблема в том, что они отказываются работать и в конечном итоге находятся абсолютно точно снаружи #header относительно тела.

Нечетная вещь. Я уже позиционировал другой элемент абсолютно внутри заголовка, и он работает (фотография ленты). Однако, когда я вставляю два других элемента, заголовок просто ломается: все содержимое заголовка перемещается в нижней части страницы.

Любые мысли?

<div id="bodyad1"> 
    <img src="images/person1.png" alt=""> 
    <div id="bodyad1-text"> 
     <h3>—Featured Story—</h3> 
     <p>John Smith</p> 
     <h2>Toronto Criminal Lawyer</h2> 
</div> 

<div id="bodyad2"> 
    <img src="images/person2.png" alt=""> 
    <div id="bodyad2-text"> 
     <h3>—Featured Story—</h3> 
     <p>John Smith</p> 
     <h2>Toronto Criminal Lawyer</h2> 
    </div> 
</div> 

<div id="adlogo"> 
    <img src="images/advocatedaily-logo.png" alt="Advocate Daily dot com Logo"> 
    <h2>Ontario's Legal News</h2> 
</div> 
<div id="adsash"></div> 

<div class="clear"></div> 

CSS (да, я знаю, что я мог бы сделать мои стили более кратким)

/*header*/ 
#header { 
    display: block; 
    border-bottom: 1px solid #9e0505; 
    position: relative; 
} 
/* Featured Lawyer Body Shots */ 

#bodyad1 { 
    display:block; 
    position: absolute; 
    width: 220px; 
    height: 94px; 
    bottom: 0px; 
    left: 60px; 
} 

#bodyad2 { 
    display:block; 
    position: absolute; 
    width: 220px; 
    height: 94px; 
    bottom: 0px; 
    right: 60px; 

} 

#bodyad1 img{ 
    float:right; 
    display:block; 
} 

#bodyad1-text { 
    height:94px; 
    float:right; 
} 

#bodyad1-text h3 { 
    font: italic 10px helvetica, arial, sans-serif; 
    color: #666; 
    text-align: right; 
} 

#bodyad1-text p { 
    font: normal bold 11px helvetica, arial, sans-serif; 
    text-transform: uppercase; 
    color: #cd1713; 
    text-align: right; 
} 

#bodyad1-text h2 { 
    font: normal bold 11px helvetica, arial, sans-serif; 
    color: #666; 
    text-align: right; 
} 

#bodyad2 img { 
    float:left; 
    display:block; 
} 

#bodyad2-text { 
    height: 94px; 
    float: left; 
} 

#bodyad2-text h3 { 
    font: italic 10px helvetica, arial, sans-serif; 
    color: #666; 
    text-align: left; 
} 

#bodyad2-text p { 
    font: normal bold 11px helvetica, arial, sans-serif; 
    text-transform: uppercase; 
    color: #cd1713; 
    text-align: left; 
} 

#bodyad2-text h2 { 
    font: normal bold 11px helvetica, arial, sans-serif; 
    color: #666; 
    text-align: left; 
} 

Answer 1

Оказывается, я отсутствовал закрывающий Div тег, но я сделал это похоже, что я действительно закрыл его из-за моего стиля отступов.

Довольно смешная вещь для публикации. Продолжать.

Спасибо @pebbl.