How to Add a Floating Text to Blogger Blogspot Post

What is a Floating Text?

The current versions of most of the browsers (like IE, Mozilla Firefox, Chrome, Opera, Safari) support the float attribute of the <div> and the heading tags which can be used to create a text that will "float" (on left or right) "inside" another text. In other words, a part of a post text can be wrapped with another part of the post text, similarly as if the first text was an image. The text in the upper left corner at the begging of this post (e.i. the italic, red colored question "What is a floating text?") is an example of a floating text. Below are some examples which can help you add a floating text to your Blogger Blogspot post. The code has to be added in the HTML editor.

Example #1: Adding text that floats on left

---

The code:

<div style="width: 100%;">
<div style="
float: left;
margin-bottom: 5px;
margin-right: 10px;
width: 150px;">
<div style="text-align: center;">THIS TEXT FLOATS ON LEFT</div>
</div>
<div style="text-align: justify;">
This is the wrapping text. The text that floats on left will not appear in red color. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

THIS TEXT FLOATS ON LEFT

This is the wrapping text. The text that floats on left will not appear in red color. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

Code explanation:

• The width attribute in the first <div> tag controls the width of the whole block: the floating text and the wrapping text. The values for this attribute can be given in percent (e.g. 60%) or pixels (e.g. 650px). When this value results in an block that has a width less than the regular post text width, the block will be displayed on the left. To display it in the center or on the right, add <div align="center"> or  <div align="left"> at the beginning of the above code and </div> at the end. The result for changing the width value to 60% and  replacing the three dots in: <div align="right">... </div> is:

THIS TEXT FLOATS ON LEFT

This is the wrapping text. The text that floats on left will not appear in red color.Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

• The text that floats is controlled with the <div> tag at the second line and eighth line </div> tag at the eight line of the code.
• The values of float attribute are "left" or "right". You can put "center" as a value, but it will result with displaying the wrapping text below the floating text.
• The margin-bottom attribute (with values in pixels) is the height of the blank space between the floating text and the line of the wrapping text that appears right below the floating text. You should add the margin-top attribute if the floating text appears in the middle as in the Example #2.
• The margin-right attribute (with values in pixels) is the width of the blank space between the floating text and the wrapping text that's on the right. If the value for the float attribute is "right", then the margin-left attribute should be used instead.
• The width attribute in the the sixth line of the code controls the width of the floating text.
• The  text-align: center describes the alignment of the floating text, while  text-align: justify; describes the alignment of the wrapping text.

Example #2: Adding text that floats on left and in the middle

---

The code:

<div style="width: 70%;">
<div style="text-align: justify;">
This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.<br />
<div style="float: left; margin-bottom: 5px; margin-right: 10px; margin-top: 20px; width: 150px;">
<div style="text-align: center;">
THIS TEXT FLOATS ON LEFT</div>
</div>
This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

THIS TEXT FLOATS ON LEFT

This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

Note #1: Skip the <br/> in the code for a continuous text display.


Example #3: Adding text that floats on right

---

The modification of the code in Example #1:

<div style="width: 100%;">
<div style="
float: right;
margin-bottom: 5px;
margin-left: 10px;
width: 150px;">
<div style="text-align: center;">THIS TEXT FLOATS ON RIGHT</div>
</div>
<div style="text-align: justify;">
This is the wrapping text. To see the full "potential" of the code, an extra line of text is added. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

THIS TEXT FLOATS ON RIGHT

This is the wrapping text. To see the full "potential" of the code, an extra line of text is added. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

The modification of the code in Example #2:

<div style="width: 70%;">

<div style="text-align: justify;">

This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

<div style="float: right; margin-bottom: 5px; margin-left: 10px; margin-top: 20px; width: 150px;">

<div style="text-align: center;">

THIS TEXT FLOATS ON RIGHT</div>

</div>

This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>

<br /></div>

The result:

This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

THIS TEXT FLOATS ON RIGHT

This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

Example #4: Adding a floating text with borders

---

To add a border/frame of the floating text, you can combine the codes from the previous post with the above ones. The most simple way to do this is by adding few lines of code as below (the added lines are in red).

The modification of first the code in Example #3:

<div style="width: 100%;">
<div style="
border: double 4px #ff0000;
float: right;
margin-bottom: 5px;
margin-left: 10px;
padding: 2px;
width: 150px;">
<div style="text-align: center;">THIS TEXT FLOATS ON RIGHT</div>
</div>
<div style="text-align: justify;">
This is the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

THIS TEXT FLOATS ON RIGHT

This is the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

The modification of the second code in Example #3:

<div style="
border: solid 2px #00ff00;margin: 5px;padding: 3px;width: 70%;">
<div style="text-align: justify;">
This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.
<div style="
border: dotted 2px #0001fc;float: right;
margin-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 10 px;padding: 4px;width: 150px;">
<div style="text-align: center;">
THIS TEXT FLOATS ON RIGHT</div>
</div>
This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
</div>

The result:

This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

THIS TEXT FLOATS ON RIGHT

This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.