April 18, 2009

Why do I get an unwanted new line in this simple HTML?

I have a problem that I haven't been able to figure out. I have hundreds of web pages that include a Google AdSense block followed by an image. The ads and image should appear side by side if the browser window is maximized and if the screen resolution is at least 800x600 pixels. Here's a reduced copy of a sample page that shows how the page should look.

The above image is from Firefox 3.0.8, but the page also displays properly in my old Mozilla 1.7.12 browser. Next is how the sample page looks in Firefox, Internet Explorer 6.0.2800.1106 and Internet Explorer 7.0.5730.13.

The total width of the ad block plus the picture is less than the screen width of 800 pixels. Plus, the code has the same problem if I use a smaller picture or if I increase the screen resolution to 1024x768. So it's not a wraparound problem related to width.

The code is very simple HTML as follows.

<p align=center>

[javascript Google AdSense code]

<img src="brp-sunset.jpg" alt="Picture of a sunset from the Blue Ridge Parkway"></p>

There is no <br> nor paragraph change between the ad code and the image, so why does it start a new line?

Here's a link to the actual page on the Internet:

Thanks to anyone who can explain this and tell me an easy way to fix it. I could rewrite the code with a table or something and force it to not go to a new line, but like I said I have hundreds of pages so the simplest solution is what I'm looking for.