Posted by Colin Wilson on 03/02/07 06:52

for Images try:

pull image
Sample Use
(In the html file)
<p><div class="pull-image-200"><img src="../images/amsterdam_mosque.jpg"
width="200" height="185"><br>text here</div><p>
(in the .css file)
DIV.pull-image-400{
margin-top: 1em;
float: right;
margin-left: 1em;
width: 400px;
text-align: right;
font-size:12px;
font-color: #c0c0c0;
}
DIV.pull-image-300{
margin-top: 1em;
float: right;
margin-left: 1em;
width: 300px;
text-align: right;
font-size:12px;
font-color: #c0c0c0;
}
DIV.pull-image-200{
margin-top: 1em;
float: right;
margin-left: 1em;
width: 200px;
text-align: right;
font-size:12px;
font-color: #c0c0c0;
}
For Text try the following in your .css file

DIV.pull-left{
background:#ffffdd;
border: 1px dotted #333333;
float: left;
margin: 1em;
margin-left: .1 em;
width: 250px;
padding: 1em; font-family: Georgia;
font-size: 18px;
color: #000000;
text-align: center;
line-height: 24px;

}

DIV.pull-right{
background:#ffffdd;
border: 1px dotted #333333;
float: right;
margin: 1em;
margin-right: .1 em;
width: 250px;
padding: 1em; font-family: Georgia;
font-size: 18px;
color: #000000;
text-align: center;
line-height: 24px;

}

In your html file put:
<div class="pull-right"><center><font
size="300%">&sect;</font></center><br></span> text here </div>
<div class="pull-left"><center><font
size="300%">&sect;</font></center><br></span> text here </div>

Some more with all the coding in the HTML file (bad idea!)
<!-- pull quote number one -->
<div id="pullquotefirst" style="margin-top: 1em; margin-left: 1em;
margin-bottom: 1em; clear: left; font-size: 20px; font-family: Verdana;
display: block; width: 530px;"><span id="quotesleftfirst" style="font-size:
500%; color: #000000; margin-top: 0em; float: left; font-family:
serif;">&ldquo;</span><span id="quotesrightfirst" style="font-size: 500%;
float: right; font-family: serif; margin-top: .75em;">&rdquo;</span><div
id="dropcapfirst" style="float: left; font-size: 600%; font-family: Georgia;
font-weight: bold; color: #ccccdd;">79</div><span style="margin-top:
1em;">percent of our test users always scanned any new page they came
across; only 16 percent read word-by-word.</span></div>
<!-- pull quote number two" -->
<div id="pullquotesecond" style="margin: 1em; width: 550px; font-size: 18px;
font-family: Georgia; display: block; color: #000033; text-align:
right;"><span id="dropcapsecond" style="font-size: 300%; font-family:
Georgia; color: #ddcccc; line-height: 50px;">All of a sudden</span><br />we
have a paragraph stuck out of context and making little sense.</div>
<!--pull quote number three-->
<br><div id="pullquotethird" style="float: right; margin-right: 0em;
margin-left: 24px;
margin-bottom: 1em; width: 160px; font-family: Helvetica, Arial; font-size:
28px; color: #336633; text-align: right; line-height: 24px; display:
inline;">...this may be more desirable when you consider <b>the deplorable
state of font rendering</b> on some systems... <img
src="e:\nsm\photos\commander2.jpg"><br>Commander Schoep</div>
<!--pull quotes number four -->
<div id="pullquotefourth" style="background: #ffffdd; border: 1px dotted
#333333; float: left; margin: 1em; margin-left: .1 em; width: 250px;
padding: 1em; font-family: Georgia; font-size: 18px; color: #333333;
text-align: center; line-height: 24px;"><span id="star" style="font-size:
300%; display: block;">&sect;</span><br />maintain pull quote consistency
within a single article or document (unlike this one.) <img
src="e:\nsm\photos\commander2.jpg"></div>
<!-- pull quote number five -->
<div id="pullquotefifth" style="border-bottom: 1px dotted #333333;
margin-top: 20px; margin-bottom: 1em; width: 800px; font-family: Times;
font-size: 36px; color: #332233; text-align: right;"><span id="dropcapfifth"
style="font-size: 200%; color: #222222; line-height: 120px;"><span
id="bigcap" style="font-size: 200%;">&raquo;</span>I do not intend</span><br
/>to make sure that <b>these CSS pull quotes</b> work properly in every
browser.</div>

<!-- start pullquote -->
<table border=0 width=50% bgcolor=#FFFFFF cellspacing=0 cellpadding=10
align=RIGHT><tr align=center><td><img
src="/daily/common/images/gold_rule.gif" height=1 border=0 WIDTH=100%
vspace=5><br><font face=Verdana size=6
color=#>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I</font><font face=Arial size=3
color=#003366 class=callout>nvite the airline<br>to buy you a
meal.<br><br><img src="/daily/common/images/gold_rule.gif" height=1 border=0
WIDTH=100% vspace=5><br></td></tr></table>
<!-- end pullquote -->
<style type="text/css">
p.pullquote {background-color: #315b7f;
color: #f3f1f4;
padding: 2%;
font-style: italic;
font-size: 1.5em;
border: medium #4a88be solid;
margin-left: 3em;
margin-right: 3em;}
p.pullquote1 {background-color: #315b7f;
color: #f3f1f4;
padding-bottom: 5%;
padding-left: 1%;
padding-right: 1%;
padding-top: 5%;
font-style: italic;
font-size: 1.5em;
border: medium #4a88be solid;
margin-left: 3em;
margin-right: 3em;}


</style>
<p class="pullquote">&quot;To really understand style sheets you must
understand the difference between structural and presentational
markup.&quot;</p>
and
<p class="pullquote1">If I set the padding as shown below, my pull-quotes
would look like this, with more space above and below the text, and less
space to the left and right.</p>
Images
<div class="pull-image-200">
<div class="pull-image-300">
<div class="pull-image-400">



"Vahid" <v.chaychi@gmail.com> wrote in message
news:1172811020.187130.72650@h3g2000cwc.googlegroups.com...
> Hi,
>
> What is the attribute for floating div? I want to have a <div> in a
> page that floats at left.
>
> Regards,
> Vahid
>

[Back to original message]