Float
Float property can have one of these five values -
left: - If the value is given then the element is left float on the left side.
right: - It is float in the element right side.
none: - By giving this value the element is not floated, but it is shown according to the normal flow of the page.
initial: - This keyword is used to set the default value of any CSS property.
possesses: - When an element gives value to the float, the element takes the float value of its parent element.
1) float: left;
<html>
<head>
<style>
#divone {
border: 1px solid blue;
height: 100px;
width: 100px;
float: left;
}
#divtwo {
border: 1px solid green;
height: 100px;
width: 100px;
float: left;
}
</ style>
</ head>
<body>
<div id = "divone"> Box 1 </ div>
<div id = "divtowo"> Box 2 </ div>
</ html>
 |
| Float-property |
2) float: right;
<html>
<head>
<style>
# divone {
border: 1px solid blue;
height: 100px;
width: 100px;
float: right;
}
</ style>
</ head>
<body>
<div id = "divone"> box </ div>
3) float: inherit;
<html>
<head>
<style>
#parent {
border: 1px solid blue;
height: 100px;
width: 100px;
float: right;
}
#box {
height: 50px;
width: 50px;
border: 1px solid green;
float: inherit;
}
</ style>
</ head>
<body>
<div id = "parent">
<div id = "box"> box </ div>
</ div>
</ body>
</ html>
 |
| Float-property-3 |
No comments:
Post a Comment