saftutorials.com
CSS Float Tutorial

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?

How to use CSS Float?

1) CSS Float use in a style code area -  like:  float: left

CSS Float Basic Property Type
<!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 basic property type : float:left;
CSS float basic property type : float:right;
CSS Float Property type.

There are three property type in CSS float -  such as

1) floatnone;

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) floatleft;

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) floatright 

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;

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic