Ad friendly 3column layout in Frames

This example shows a 3 column layout made with frames, this layout has a top and bottom division in the center frame, these can be used for ads, which often requires to be placed in the content frame in order to display relevant ads. The CSS was written as inline css, i often use inline-styles when testing stuff, see also: An Introduction to CSS

This frame can also be viewed in a new window, direct link: ContentFrame.html

Placement of ads

At the time of writing, the following google page (https://www.google.com/adsense/support/bin/answer.py?answer=10192) states that you should include your adsense code in the main content frame, since adsense target ads based on the content in the frame/page of which you place your code. Quote: If your page uses Frames, make sure that the code is pasted into the frame that contains your page's main content. We use this content to target ads

The alternative is to use server-side includes instead of frames, to include the same ad on top of all your pages.

Source Code

Main page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
   <title>Frame Layout Example</title> 
 </head>
 <frameset cols="125px, *, 125px" frameborder="0">
   <frame src="Side1.html">
   <frame src="ContentFrame.html" frameborder="0">
   <frame src="Side2.html" frameborder="0">
 </frameset>
</html>

Side1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 </head>
 <body style="background:purple;margin:0;">
   <p>Side1</p>
 </body>
</html>

ContentFrame.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 </head>
 <body style="background:Silver;margin:0;text-align:center;">
   <div style="margin:0;background:#ffffff;width:100%;height:150px;text-align:center;"></div>
   <h1 style="margin:0;">The Content Frame</h1>
   <div style="margin:0;background:#ffffff;width:100%;height:150px;text-align:center;"></div>
 </body>
</html>

Side2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 </head>
 <body style="background:purple;margin:0;">
   <p>Side2</p>
 </body>
</html>