Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style cssFloat Property
The HTML DOM cssFloat property is used for setting or getting an element’s horizontal alignment. You can float the element either left or right −
Following is the syntax for −
Setting the cssFloat property −
object.style.cssFloat = "left|right|none|initial|inherit"
The above property values are explained as follows −
| Value | Description |
|---|---|
| None | Thisis the default value and doesn’t float the element. |
| Left | Thismakes the element float to the leftmost position of the parentelement. |
| Right | Thismakes the element float to the rightmost position of the parentelement. |
| Initial | Forsetting this property to initial value. |
| Inherit | Toinherit the parent property value |
Let us look at an example for the cssFloat property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 50px;
width: 50px;
margin: 5px;
float: left;
background-color: rebeccapurple;
}
div+p{
height:70px;
color: red;
border: 2px solid #b8860b;
}
</style>
<script>
function changeFloat() {
document.getElementById("DIV1").style.float = "right";
document.getElementById("Sample").innerHTML="The div element will now be floated to right";
}
</script>
<body>
<div id="DIV1"></div>
<p>This is a sample paragraph. Here is another line in this paragraph. Here is the third line in the paragraph. </p>
<p>Change the above div float property by clicking the below button</p>
<button onclick="changeFloat()">Change Float</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Float” button −
Updated on: 23-Oct-2019
19 Views
Advertisements