Export (0) Print
Expand All

styleFloat property

Sets or retrieves on which side of the object the text will flow.

CSS 2.1, Section 5.5.25

Syntax

Integer value = object.put_styleFloat( v);Integer value = object.get_styleFloat(* sFloat);

Property values

Type: BSTR

none (none)

Default. Object displays where it appears in the text.

left (left)

Text flows to the right of the object.

right (right)

Text flows to the left of the object.

-ms-positioned (-ms-positioned)

Internet Explorer 10. Specifies that the object is a positioned float. For more information about positioned floats, see Positioned Floats.

String format

left | right | none

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

Remarks

With a value of left or right, the object is treated as block-level—that is, the IHTMLRuleStyle::display property is ignored. For example, floating paragraphs allow the paragraphs to appear side-by-side.

Objects following a floating object move in relation to the position of the floating object.

The floating object is moved left or right until it reaches the border, padding, or margin of another block-level object.

The div and span objects must have a width set for the IHTMLRuleStyle::styleFloat attribute to render. In Microsoft Internet Explorer 5, div and span objects are assigned a width by default and will render if a width is not specified.

Examples

This example shows how the IHTMLRuleStyle::styleFloat property affects the flow of the text. In the three div elements below, the blue square image floats to the left and right of the text. The third div element show the image and text with no float value applied.


<div>
   <img class="left" src="square.png" alt="Blue square"/>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
   <img class="right" src="square.png" alt="Blue square"/> 
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
   <img src="square.png" alt="Blue square"/> 
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>


Below is the CSS with values for IHTMLRuleStyle::margin and IHTMLRuleStyle::styleFloat applied.


body {
   width: 500px;
}	
.left {
   float: left;
   margin: 5px;
}
.right {
   float: right;
  margin: 5px;
}

You can see the result below. The first div sets IHTMLRuleStyle::styleFloat to left, the second div sets IHTMLRuleStyle::styleFloat to right, and the IHTMLRuleStyle::styleFloat property is not used in the third div.

Three divs using the float property

This example uses inline scripting and the IHTMLRuleStyle::styleFloatproperty to swap images when the mouse moves over the button.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/styleFloat.htm


<img id="oSphere" scr="sphere.jpeg" style="float:left">
<img id="oCone" src="cone.jpeg" style="float:right">
:
<button onmouseover="oSphere.style.styleFloat='right'; 
    oCone.style.styleFloat='left'"
    onmouseout="oSphere.style.styleFloat='left'; 
    oCone.style.styleFloat='right'">
    Flip-flop images.
</button> 

Requirements

Minimum supported client

Windows XP [desktop apps only]

Minimum supported server

Windows Server 2003 [desktop apps only]

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

 

 

Community Additions

ADD
Show:
© 2014 Microsoft