Question

Before I explain…

This is the HTML part:

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

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
 }