Thread

I’m baffled by what I’m doing wrong here, and would appreciate any help you can offer.

I have a sidebar that is supposed to appear on the right side of all my pages. (On the front page and on the articles page, it is supposed to appear one column to the left of the Google Adsense skyscraper ads which are supposed to be on the far right.)

I have two problems. The first is that although this format is working on most of my articles, there is one type of article that appears on the site weekly (and is one of the most popular in terms of hits) with which it doesn’t seem to work. On that column (here is the link: Top 25 ) instead of going to the right side of the page, the sidebar drops down beneath all of the other content on the page. Not only does this look just awful, and cause the log-in message to be lost at the bottom of the page, it also causes the calendar, which is included in the sidebar, to become distorted. It’s just a mess.

The template is the same, whether it is an ordinary text story (where the sidebar seems to be working just fine), or the Top 25 story, where it looks like the dog’s breakfast. The best I can figure out is that the Top 25 story involves a table, but I can’t figure out why that would matter, as the table width is set well within the limits of the content section, which in turn is supposed to determine where the sidebar floats.

The second problem is related, but applies to the front page and all the article view pages. I created a psuedo-four-column layout following instructions in a tutorial someone on this board linked me to. (Thanks). Basically, it involves two sections, one floating to the right of the other. Each section has two columns, one floating to the right of the other within the section. The main content takes up two of the columns in section one on the left, the sidebar and the Adsense skyscraper take up the two columns in section two on the right. The purpose of this was to get the Adsense ads to float as a fourth column—before I did this, it would not go to the right hand side of the page at all.

This works—almost, but not quite. Depending on how wide you open your browser window, the Adsense skyscraper overlaps part of the RSS feed link and/or part of the mini-calendar. No amount of tinkering with margins and padding has yet been able to resolve that issue. But the big problem came when I tried to add a second skyscraper beneath the first—it refuses to align itself beneath the first skyscraper and instead inserts itself beneath part of the sidebar. I can’t figure out why this should be, since it is all part of the same “embed” as the first skyscraper.

I’m happy to buy a beer for anyone who can help me sort this out and get it working properly.

I will address your second problem in this post - need to look a bit more at the first issue.

The fundamental problem is that your ad tower has no relationship to the rest of your page, i.e.  the div#layoutWrapper, which wraps your site content and the div#column4 are completely independent of each another and therefore behave according to their own rules as the window size changes.  You should restructure your page in order to force a relationship - one easy way to do this would be to create another div whose width is equal to the sum of the previously mentioned divs, and then wrap everything within it.

There are a number of other more subtle issues - I would add this to your style sheet

#layoutWrapper {overflow:hidden;}

This will force that div to contain all children, especially floats.
The other issue is that you have far too many divs, many of which are unnecessary and which result in difficult to maintain code.

Thanks, Roi. Could you please elaborate on how to implement this? My original intent was to have the layoutWrapper contain all of the divs, including column4, which is a child of section1, which is in turn a child of content, and thus the grandchild of the layoutWrapper. So the layoutWrapper ought to be performing that “hold everything” function you are describing for the new div. If what I have accomplished is to have the column4 (adtower) independent of the layoutWrapper, that was inadvertent and I’m not sure how to correct this.

(I’m very much a beginner at all of this, and much of the code I get is grabbed off tutorials, so I may very well have redundant or unnecessary divs—I’m just too new at this to know which ones are which!)

Thanks again

BTW, I just tried adding the “overflow:hidden;” code to the style sheet. The effect it had was indeed to “hide” the first ad tower. Now no matter how wide I open the browser window, that ad tower is lost. (The one that is “misbehaving” down beneath the sidebar still appears, though.)

So my guess is that I first need to learn how to resolve the relationship problem you describe and get the ad-tower reconnected with the layoutWrapper, and then try the overflow:hidden again. Would be greatly appreciative of any guidance you can offer. Thanks.

OK, here is the 10,000 foot view 😊

What you want is a two column set-up.  The left column is your website and the right column is the google ads.  Here is the basic HTML:

<div id="wrapper">
     <div id="google_ads">Google content goes here</div>
     <div id="layoutWrapper">Site content goes here</div>
</div>

Here is the CSS:

#wrapper {width:960px; margin:0 auto; overflow:hidden;} /*--sets overall width, centers in browser, contains all floats--*/
#google_ads {width:160px; float:right; margin-top:150px;} /*--sets width, float right; push down to content area---*/
#my_site {width:780px; overflow:hidden;} /*--width assures content will be to the left, contains all child floats--*/

Note that the total width is 960px, which assures that the entire page will be visible in a 1024x768 window; the width of the child divs add up to 940px, which will leave a 20px gutter between them.  You can adjust as you like for wider screens, but the accepted “minimum standard” today is 1024px.

To apply this to your site, create a new div#wrapper, using the code above.  Wrap this around all of your content - i.e. it should be the first div after the body tag and the last closing div before the closing body tag.  Next, create another new div#google-ads, again using the code above.  It should be the first div after #wrapper.  Finally, move all of your Google-related content into the #google_ads div.

Note that you will have to adjust some of your content in order to fit it into the narrower layoutWrapper - OR - adjust my suggestions to keep layoutWapper at its current width.  If you want to do that, then set #wrapper to 1165px and leave layoutWrapper as is.

whoops, “my_site” in the css should read “layoutWrapper”

Thanks so much, ROI. I’ll give this a try and let you know how it goes.

Any thoughts on the first half of the problem?

Glad to be of help.  Re: first part of problem, I suspect it is a similar issue.  Will give it a look and get back to you.

Roi