Home/ Questions/Q 6825885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:05:00+00:00

Forgive me if my question is stupid, but I’m not a web programmer and

  • 0

Forgive me if my question is stupid, but I’m not a web programmer and I’ve spend the past 2 hours trying to figure this out.

So, I am using Weebly for my website, and there is a “content” area where I can place elements. Then to the right and left of the “content” area, I want to place ads.

I’ve figured out how to do this using absolute positioning, and it looks fine on a computer’s browser, but on Mobile (Regardless of user agent used), the google adsense ads overlay my content area.

Here is what I want it to look like:

http://testing.jakaar.net/ (this website is no longer in existence.

EDIT: http://android.jakaar.net/index.html (this is my website, and it works now, see below for the answer to my issue).

But, that does NOT work on a mobile phone. The ads still show, they just overlay.
EDIT: It works now, see my answer below.

I tried using position:relative in my css to position the ads to the left and right, but then they are either above or below my content area, so it pushes everything up or down.

Here is the CSS that I think is relevant:

body {
    background: url(bodybg.jpg) top repeat-x;
    background-color:#efefef;
    font-family: arial, sans-serif;
    font-size:12px;
    color:#666666;
    margin:0;
    padding:0;
}

#content{
    margin-left:auto;
    margin-right:auto;
    width: 898px;
    background: #fff;
    min-height: 500px;
    _height: 500px;
    padding: 32px;
}

Then for the HTML:

<head>
<title>{title}</title>
<style type="text/css">
.right
{
position:absolute;
right:0px;
padding-right:80px;
padding-left:80px;
margin-top:180px;
}
.left
{


   position:absolute;
    left:0px;
    padding-right:80px;
    padding-left:80px;
    margin-top:180px;
    }
    </style>


        <div id="wrapper">
            <div id="header">
                <div id="headerleft">{logo max-height="60"}</div>
                <div id="navigation">{menu}</div>
             </div>

            <div class="right">
    //adsense add that goes on the right
    </div>
    <div class="left">
    //adsense add that goes on the left
    </div>
<div id="content">
        {content}
        </div>

        <div id="footer">{footer}</div>
    </div>

I’ve also tried using float:left and float:right, but it gave the same behavior as the absolute positioning.

Any help is greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I created a 3 column layout, and placed my ads in column 1 and column 3 then placed the “Content” in column 2. I used http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs_9.htm for a tutorial.

    I also used position:fixed for my ads so they scroll with the page.
    That caused formatting issues that I don’t feel like fixing right now, so I removed the fixed positioning.

    The result is here: http://android.jakaar.net/index.html

    Here is the relevant CSS:

    #wrapper {
    width: 1402px;
    margin: 0 0 0 20px; 
    padding: 0;
}
#wrapper #topad
{
margin-top:20px;
margin-bottom:20px;
}
#wrapper #col1 
{ 
width: 190px;
float: left; 
margin-top: 230px;
} 
#col1 #leftad
{
float:right;
position:fixed;
width:160px;
}
#wrapper #col2outer 
{
width: 1202px;
float: right; 
margin: 0; 
padding: 0; 
} 
#col2outer #col2mid 
{ 
width: 962px; 
float: left;
} 
#col2outer #col2side 
{ 
margin-top: 230px;
width: 190px;
float: right; 
}
#col2side #rightad
{
position:fixed;
width:160px;
}

    And the relevant HTML:

    <body>
<center><!--I used this to enclose the entire body because otherwise everything was off-center, of course-->
    <div id="wrapper">
        <div id="col1">
        <div id="leftad">
        <!--google adsense ad code-->
        </div>
        </div>

        <div id="col2outer">
        <div id="col2mid">
        <div id="header">
            <div id="headerleft">{logo max-height="60"}</div>
            <div id="navigation">{menu}</div>
            </div>
            <div id="topad">
            <!--google adsense ad code-->
        </div>

        <div id="content">
          {content}
          </div>
          </div><!--this is the close of "col2mid"-->

          <div id="col2side"> 
          <!--google adsense ad code-->
          </div>

          </div><!--this is the close of "col2outer"-->



        <div id="footer">{footer}
        </div>

    </div><!--this is the close of "wrapper"-->

    </center>
</body>
    • 0