float: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The float property creates a floating box.

The floating iframe can be created by applying this property to the IFRAME element.


#example {
float: left;
}

Property Value Explanation
float left the iframe floats to the left
(the text wraps to the right of the iframe)
right the iframe floats to the right
(the text wraps to the left of the iframe)
none the iframe doesn't float (default)

Please see the "clears float" when you specified the left or right.

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example { width: 100%; }

iframe {
width: 200px;
height: 130px;
}

#example1 { float: left; }
#example2 { float: right; }

</style>

</head>
<body>

<div id="example">

<iframe src="example.html" id="example1">Alternate content</iframe>
<p>
The text wraps to the right of the iframe.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: left;">--- Clears the left float ---</p>

<iframe src="example.html" id="example2">Alternate content</iframe>
<p>
The text wraps to the left of the iframe.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: right;">--- Clears the right float ---</p>

</div>

</body>
</html>

Output

The text wraps to the right of the iframe.
This is example text.
This is example text.

--- Clears the left float ---

The text wraps to the left of the iframe.
This is example text.
This is example text.

--- Clears the right float ---