¿Cómo se define el margen (CSS) alrededor de un elemento flotante absolutamente posicionado? - html, css, css-float, css-position

Antes de explicar ...

Esta es la parte 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>

Esta es la parte de 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. */

}

Ahora ... como puedes ver, el ul el elemento está flotando a la derecha y está absolutamente posicionado en la parte inferior derecha de la división principal. Esto es lo que quise decir cuando dije "un elemento flotante absolutamente posicionado".

A pesar de darle un margen, no puedo impedir el título (<div class="TitleTab"> elemento) de sobresalir en él. La imagen de abajo debe dejarlo claro.

¿Qué me estoy perdiendo?

Puntos de nota:

• No puedo modificar el HTML. Mi único ir es CSS.
• Quiero que el título se envuelva alrededor de la ul elemento. Entonces, no puedo usar el ancho.
• estoy usando position: absolute; porque quiero el ul Elemento para permanecer en la parte inferior del div justo arriba del contenido div (solo corte en la imagen).

PD: No soy muy competente con CSS.

Respuestas

los absolute:position La función está diseñada para sobresalir en.

deberías intentar flotar los elementos sin la posición absoluta:

.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
}