Библиотека Javascript. SE@RCHER

смотреть оглавление

примерразмер кода

<HTML>
<HEAD>
<TITLE>Стиль  float и его использование</TITLE>
<META http-equiv=Page-Enter content=blendTrans(Duration=0.5)>
<META http-equiv=Page-Exit content=blendTrans(Duration=0.5)>
<META HTTP-EQUIV="Expires" CONTENT="Mon, 4 Dec 2006 00:00:00 GMT">
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META http-equiv=Content-Language content=ru>
<META content=noindex name=robots>
<META content="javascript, JavaScript, скрипт, код, библиотека кодов, коды, вебмастер, webmaster, design, web-site, promotion, ad, banner, server, сайт, веб, дизайн, веб-дизайн, юзабилити, кнопки, навигация, ссылка, якорь, цвет, контраст, размер, стиль, оформление" name="keywords">
<META content="Javascript. Библиотека кодов более 1000 скриптов по любым разделам оформления веб-сайтов." name="description">

</HEAD>
<BODY>

<div class="float_left"><img src="http://www.03www.su/00001.jpg" height="150px" width="100px" alt="image 1"><br>
<div class="pos_left"><br>Each image is in its own DIV tag.</div>
</div>

<div class="float_left"><img src="http://www.03www.su/00002.jpg" height="150px" width="100px" alt="image 2"><br>
<div class="pos_left"><br>The text is nested in the image DIV tag.</div>
</div>

<div class="float_left"><img src="http://www.03www.su/00003.jpg" height="150px" width="100px" alt="image 3"><br>
<div class="pos_center"><br>This keeps the text in positional context.</div>
</div>
<hr>

<div style="width:550px;border:4px solid white;text-align:justify">
<div style="font-family:arial; font-size:8px; font-weight:bold; color:#0000FF; width:195px; FLOAT:left; border:1px solid cyan"><IMG src="http://www.03www.su/00018.jpg" width=75px height=110px align="right" border="1">This is a small block of text.  This is a small block of text. This is a small block of text. This is a small block of text. This is a small block of text. This is a small block of text. This is a small block of text. This is a small block of text. 
</div>

<div style="font-family:arial; font-size:10px; font-weight:bold; color:#0000FF; width:195px; FLOAT:right; border:1px solid red">This is a larger block of text. This is a larger block of text. This is a larger block of text. This is a large<IMG src="http://www.03www.su/00017.jpg" width=50px height=100px align="left"> block of text. This is a larger block of text. This is a larger block of text. This is a larger block of text. This is a larger block of text. This is a larger block of text. This is a larger block of text.
</div>

<P>The borders here are shown purely for ease of identification. <br>Here you can see that this </i>Main Text starts in the center with a block to the left and right. Both of these blocks contain an image where the text wraps to the available sides of these images. This center text also wraps itself round both of the blocks.<br>
You have to be aware that anything you add in the contents of the DIV</i> tag in relation to size of text, size of the image, the use of HTML</i> tags, and even the amount of text will play a major part in the overall positioning of a layout. If your document is opened in a window other than the size it was designed for it could make everything look out of place. A good way round this would be to nest everything inside a DIV with a set width.<br>
Below is how I have created this layout. 
<font size=2>
<P><b><div style="width:550px;border:4px solid white"></b>
<P><div style="font-family:arial; font-size:9px; font-weight:bold; color:#0000FF; width:195px; FLOAT:left; border:1px solid cyan"><font color="#0000FF">Float Left Contents</font></div>
<P><div style="font-family:arial; font-size:10px; font-weight:bold; color:#0000FF; width:195px; FLOAT:right; border:1px solid red"><font color="#0000FF">Float Right Contents</font></div>
<P><P>Main Text
<P><b></div></b></font>
</div>