Float Basics - What is float


  • A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible
  • Content can flow down the right side of a left-floated box and down the left side of a right-floated box


Floating an Image to the Left


To force the image over to the left edge, float: left is applied to the image using style attribut. No width is needed in this instance as the image has an intrinsic width (200px). Chine PassionIf this were a div, a width would have to be used. I choose to display a logo which is a project logo for the blog of my son : Chine-Passion : A la decouverte de la Chine. The floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left as far as possible. Content can flow down the right side of the left-floated box. I just add margin: 5px to better separate the picture and the text.

Elements following a floated element will wrap around the floated element. I do not want this to occur, so I apply the clear: both to these following elements.


Using a div box



With a div we need to specify the width of the div. I add background, padding, margin and border. To force the div box over to the left edge, float: left is applied to the div tag using style attribut.

This text is inside the div box
As with picture, the floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left as far as possible.

I also apply clear : both to the current paragraph.


  • To summarize, the style of the div box :

float: left:
width: 200px;
background: yellow;
padding: 3px;
margin: 5px;
border: 2px solid green;



Inserting AdSense Code


  • Google give us a script, which looks like this :


<script type="text/javascript"><!--
google_ad_client = "pub-nnnnnnnnnnnnn";
//200x200-ads_id
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 200;
google_ad_height = 200;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



Using floating div for the Ads



Putting all together it's now easy to encapsulate the code from Google into a floating div. We don't nead to define a background and border. Just define the width of the ads (200px in this case).

I decide to align the div box on the left, with margin: 5px 15px 5px 0px. The AdsSense Ads is realy integrated with the text of the main section of the page. It's an alternative to the usual placement into the left column. There is other way to change the outlook of Ads. We even can use CSS for AdSense. Look at this Blog, with some links to Web2Magazine and adClustr - An Online Magazine. Be careful, the width of the main section is 470px. To use some AdSense you need to change the width of template from GPC. The template define the width into the default CSS, which cannot be edited into GPC. To change it, we need to load an external style sheet, and to override the default width. There is more details here.

Again this part use clear: both.


The Code



<div style="margin: 5px 15px 5px 0px;
float: left; width: 200px;">
<script type="text/javascript"><!--
google_ad_client = "pub-nnnnnnnnnnnnn";
//200x200-ads_id
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 200;
google_ad_height = 200;
//--></script>
</div>


More Informations





One Day - One Label - One Wine

Add this gadget to Google



Using GPC