CSS - Float Align

First Page
Next Page

CSS Float Align

CSS float property set the elements align to a left side or right side.

CSS Text formatting chapter already seen CSS text-align property that set text align left, right or center. Same as float property element or group of element align set either left side or right side.

CSS div float right

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS float property</title>
</head>
<body>
  <div style="width:300px; float:right; background-color: #ff0000;">
    <p>This paragraph is display right side and CSS font-size 25 pixel set.</p>
  </div>
</body>
</html>

Result

CSS div float left

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS float property</title>
</head>
<body>
  <div style="width:300px; float:left; background-color: #ff0000;">
    <p>This paragraph is display left side and CSS font-size 25 pixel set.</p>
  </div>
</body>
</html>

Result

CSS div float center

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS margin property</title>
</head>
<body>
  <div style="width:250px; margin: 0px auto; background-color: #ff0000;">
    <p>This paragraph is display center using margin property.</p>
  </div>
</body>
</html>

Result

First Page
Next Page