CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
CSS Float is most important property of CSS. A div/table,image or others HTML Tag where to floating its depend on CSS Float. By default CSS float property type is : none.
By this tutorials you can learn
1) How to use CSS Float?
2) Kinds of CSS Float Property type?
1) CSS Float use in a style code area - like: float: left;
<!DOCTYPE html>
<html>
<head>
<title>CSS Float Basic Property Type</title>
<style type="text/css">
.div1
{
width: 400px;
height: 150px;
background: #333;
border:1px solid red;
color:#fff;
float: left;
margin: 3px;
}
</style>
</head>
<body>
<div class="div1">
Div using by widht and height px
</div>
</body>
</html>
|
CSS Float Property type. There are three property type in CSS float - such as 1) float: none; Not set floating for a div or any HTML Tag. Its default CSS float type. The div or tag stay left side if you use this floating property. 2) float: left; Set float in left side for a div or any HTML Tag.The div or tag stay left side if you use this floating property. The different between float none and float left is if you use float none div stay left but its can't make next div left side. But float left can make div serially left side. 3) float: right; Set float in right side for a div or any HTML Tag. CSS Float right
<!DOCTYPE html>
<html>
<head>
<title>CSS Float right</title>
<style type="text/css">
.divR
{
width: 40%;
height: 150px;
background: green;
border:1px solid red;
color:#fff;
float: right;
margin: 3px;
}
</style>
</head>
<body>
<div class="divR">
CSS float property type : float:right;
</div>
</body>
</html>
CSS float basic property type : float:right;
CSS float basic property type : float:right;
CSS Float left
<!DOCTYPE html>
<html>
<head>
<title>CSS Float left</title>
<style type="text/css">
.divL
{
width: 40%;
height: 150px;
background: red;
border:1px solid red;
color:#fff;
float: left;
margin: 3px;
}
</style>
</head>
<body>
<div class="divL">
CSS float property type : float:left;
</div>
</body>
</html>
CSS float basic property type : float:left;
CSS float basic property type : float:left;
CSS Float none
<!DOCTYPE html>
<html>
<head>
<title>CSS Float none</title>
<style type="text/css">
.divN
{
width: 40%;
height: 150px;
background: red;
border:1px solid red;
color:#fff;
float: none;
margin: 3px;
}
</style>
</head>
<body>
<div class="divN">
CSS float property type : float:none;
</div>
</body>
</html>
CSS float basic property type : float:none;
CSS float basic property type : float:none;
|