Having trouble with this CSS and HTML combination

I am adding 2 Asense codes into my content area, the first ad lines up correctly using the css, yet the second add does not,

The first ad should be to the Left, yes that is following the CSS.

The second add should be to the right, No it is not following the CSS for wrap .rightad

All help appreciated :smile:

<!--main-->
    <div class="main" role="main" id="primary">        
        <div class="wrap clearfix">
        <div class="leftad">
       <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <!-- 468x60_Banner -->
     <ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-9269549700663152"
     data-ad-slot="1222166321"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
     </div>
         <div class="rightad">
       <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <!-- 468x60_Banner -->
     <ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-9269549700663152"
     data-ad-slot="1222166321"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
         </div>
            <!--main content--> 

CSS:

.main       {float:left;width:100%;min-height:730px;padding:0 0 75px;background:#E9E6E0 url(../images/bgr/body.jpg) 0 0 repeat;display:inline-block;}


.wrap .leftad         {float:left;display:block;margin:10px 120px 0 0;width:200px;}

.wrap .rightad        {float:right;display:block;margin:10px 12px 0 10px;width:200px;}

The widths of the floated blocks are set to 200px but the widths of the ads you are trying to display in them are 468px so the ads don’t fit in the floated blocks.

With the right floated block the add starts at the left of the 200px floated block and extends 268px off the right of the viewport.

Change the floats so they are wide enough for their content.

1 Like

Thank you felgall for your fast help, yes that did it all aligned correctly now, thank you again :smile:

.wrap .leftad         {float:left;display:block;margin:20px 0 0 0;width:468px;}
.wrap .rightad        {float:right;display:block;margin:20px 0 0 0;width:468px;}

Unless there is something “funny” about styling adsbygoogle, the floats do not need {display:block} (that’s negated by the float) nor a width (likewise negated… floats hug their content).

The same rules apply to the CSS assigned to .main.
None of {float-left; width:100%; display:inline-block;} are needed. They serve no purpose.

1 Like

Hello ronpat, thank you for your help, I have removed the {display:block} from the css code, the Ads have remained aligned perfectly, thank you :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.