Making a box on the web page was not an easy thing. Now there are many open sources for doing this thing. ITDoc has also created a jQuery plug-in to deal with this thing.
It is named as floatbox. It is available at
github. The code that is written
to make it up is not a very strange technique. It also provide an easy usage. After source code is included the only two parameters are required. The first parameter
value includes left, right and center is for aligning on the horizontal line. The second parameter is among top, bottom,
and middle is for aligning on the vertical line.
In order to use it first download the code form
github. After downloading
put floatbox.js in the appropriate place. Then you may use your own jQuery library file or the one included with the code.
First, add the jQuery source in the html page on the top before floatbox.js. Second, add the
floatbox.js plug-in file in the page after the jQuery library.
Note that jQuery must come first because it is the core library. Add finally, add the script to call floatbox method for any element that is wanted to be float on the page.
You may see the code for more comprehension.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="float" style="width:300px;height:100px;background-color:#0F3;">
The file is also included with the code.