Как определить маржу (CSS) вокруг абсолютно позиционированного, плавающего элемента?

Question

Перед тем, как объяснить ...

Это HTML часть:

<div class="HeadingTabs"> 
    <ul> 
     <li><a href="http://google.com" class="TabLink">Google</a></li> 
    </ul> 
    <div class="TitleTab">This is some very very long title. This is some very very long title. This is a very long title.</div> 
</div> 

Это CSS часть:

.HeadingTabs { 
    display: block; 
    padding: 8px 8px 8px 2px; 
    margin: 0; 
    border: 0; 
    background: transparent; 
} 

.HeadingTabs ul { 
    display: inline; 
    margin: 0 0 0 10px; 
    float: right; 
    position: absolute; 
    bottom: 0; 
    right: 8px; 
} 

.HeadingTabs li { 
    display: inline; 
    margin: 0; 
} 

.TitleTab { 
    margin: 0; 
    display: inline; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 5px 10px; 
    line-height: 2.6; 
    white-space: nowrap; 

/* I haven't included the styling info like 
borders and background to avoid unnecessary 
distractions in code. */ 

} 

Теперь ... как вы можете видеть , элемент ul имеет плавающее право и абсолютно расположен в нижнем правом углу родительского div. Это то, что я имел в виду, когда я сказал «абсолютно позиционированный, плавающий элемент».

Невзирая на то, что это дает мне преимущество, я не могу предотвратить заголовок (<div class="TitleTab">), выступающий в него. Изображение, приведенное ниже, должно быть понятным.

Что мне не хватает?

Очки примечания:

• Я не могу изменяющие HTML. Мой единственный путь - это CSS.
• Я хочу, чтобы заголовок обернулся вокруг элемента ul. Таким образом, я не могу использовать ширину.
• Я использую position: absolute;, потому что я хочу, чтобы элемент ul оставался в нижней части div прямо над содержимым div (только обрезание на изображении).

PS: Я не очень разбираюсь в CSS.

Answer 1

Функция absolute:position предназначена для защиты.

вы должны попробовать плавающие элементы, а не без абсолюта: позиция

.HeadingTabs ul { 
    margin:10px; 
    float: right; 
} 


.TitleTab { 
    float:left; 
    margin: 0; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 5px 10px; 
    line-height: 2.6; 
    white-space: nowrap; // you need to remove no wrap, so it wraps instead of cuts off 
}