CSS Styling Problem. Need Help

Hello

I am displaying a Banner inside the first post of each thread, however when a quote is present it overlaps the Ad inside the first post and I can't figure out how to solve this Issue:

A demo of the problem can be found here:

Ubunu Kinderrutschen - Ihr Kind wird sie lieben!

I am using the below CSS and HTML Code:

in template additional.css:

Code:

/* Inline AD CSS */
.AdInline { float:right; }
.AdLR336 { margin-bottom:20px; margin-left:15px; width:336px; text-align:center; }
.AdCommercial { overflow:hidden; background-color:#FAFAFA; }
.AdLR336 .AdDottedLine, .AdDottedLine { float:none; margin:0; padding:0; width:100%; }
.AdCommercialInner { margin-bottom:10px; margin-top:-10px; }
.AdInline .AdLR336 h5 { width:330px; font-size:10px !important; font-weight:normal; text-align:right; line-height:normal; margin:0; padding:0; font-family:verdana,arial,helvetica,geneva,sans-serif; z-index:10;}
.AdDottedLineTop { background-image:url(images/bg_maincontainer_line.gif); background-repeat:repeat-x; margin-bottom:10px; padding-bottom:10px; font-size:1px; height:1px !important; line-height:1px; width:100%; }
.AdDottedLineBottom { background-image:url(images/bg_maincontainer_line.gif); background-repeat:repeat-x; margin:0px; padding:0; font-size:1px; height:1px !important; line-height:1px; width:100%; }
.AdCenter { align:center; margin:0; padding:0;}

in template postbit_legacy below:

Code:

{vb:raw ad_location.thread_first_post_content}

I added:

Code:

<vb:if condition="$show['guest']">
<div class="AdInline">
 <div class="AdCommercial AdLR336">
  <div class="AdDottedLineTop"></div>
  <div class="AdCommercialInner">
   <h5>ADVERTISEMENT</h5>
   <div class="AdCenter">
    AD CODE HERE
   </div>
  </div>
  <div class="AdDottedLineBottom"></div>
 </div>
</div>
</vb:if>

Does anyone have an Idea how to solve this issue?
I tried z-index but that did not work.

Thank you in advance

StarBuG

you need a clearing element to clear the float.

add

Code:

class="clearfix"

to your ad div
and

Code:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

to your additional.css template.

Thanks but this makes the whole content of the post display below the Ad,
I want it to float to the left, just if there is a quote that should be moved down below the Ad.

Any other ideas?

Make sure the quote div has a clearing element on it too then.

I added <div class="clearfix"></div> with your css definitions to the template bbcode_quote
at the bottom but the effect is the same, the content is moved below the Ad

No, you don't want that on the quote div.. you just want a clear:both on the quote div, not an :after psedu class.

I added clear:both; in the bbquote css and <div class="clearfix"></div> below my Ad Divs but still content below Ad.

Or am I understanding something wrong?

AHHHHH

The clear:both; in the bbquote css alone did the trick!

Thank you very much