How to define margin (CSS) around an absolutely positioned, floating element? - html

Question

Before I explain...
This is the HTML part:
<div class="HeadingTabs">
<ul>
<li>Google</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>
This is the CSS part:
.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. */
}
Now... as you can see, the ul element is floating right and is absolutely positioned to the bottom-right of the parent div. This is what I meant, when I said 'an absolutely positioned, floating element.'
Dispite the giving it a margin, I am unable to prevent the title (<div class="TitleTab"> element) from protruding into it. The image below should make it clear.
What am I missing?
Points of note:
I cannot modify the HTML. My only go is CSS.
I want the title to wrap around the ul element. So, I can't use width.
I am using position: absolute; because I want the ul element to stay at the bottom of the div right above the content div (just cut-off in the image).
PS: I am not very proficient with CSS.

Answer 1

The absolute:position function is designed to be protruded into.
you should try floating the elements instead without the 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
}