If you are those blogger, like me, who would always customize themes yourself, there is no way to escape learning up some of those technologies behind web pages. No HTML, No CSS, No PHP (or whatever web language your blogger software is based on), No custom theme.

Today, I’ve learn the difference between the DIV and the SPAN tag.

During my WTF moment with AdSense-Deluxe plugin, I was just eager to fix the unsightly misalignment that I have neglect to check the other aspect of the layout.

It was days after I’ve fix the misalignment in the home page that I realized the first and second paragraph in all my posts was always join together when I have place an ads panel on top of the post. In other words, the paragraph spacing had gone missing between the first and second paragraphs. The rest of the post seems unaffected and the paragraph spacing turned out correct. When I look at the page source, I saw this:

<p><div…><adsense code></div>followed by the text in the paragraph</p>

So I went to my best pal Google and ask for help. Turns out the reason for the missing spacing between my first two paragraphs is because the DIV tag creates a line break before and after the DIV block and that will interfere with the paragraph tag <P>.

Ah ha! So all I need to do is to move the DIV in front of the paragraph tag. Like this:

<div…><adsense code></div><p>followed by the text in the paragraph</p>

Well, that’s what I thought. Unfortunately I was not able to locate any options in WordPress that will allow me to tell WordPress to stop adding the <P> tags for me and let me do it myself. To fix it in that manner, it would be nothing short of a hack or a plugin. Both of which I don’t fancy.

When I dig deeper into some more HTML reference, I began to understand.

DIV is a generic block-level container that will interfere with other block elements if the DIV is contained within the other block element such as the paragraph block. What I needed was an inline container instead.

The solution to my problem is to use the SPAN tag instead. Like this:

<p><span…><adsense code></span>followed by the text in the paragraph</p>

I still think this is a hack because the ads block should be logically divided from the rest of the post text. After all, I am going to use the float property in my style.css to move it out of line. However, WordPress does not support pure HTML writing in the write post interface, at least none that I can find.

If any readers knows better, please feel free to correct me.