CSS Float Setting

floatCSS Float Setting is an important matter in web development. with the help of css float property

we can setup an image or various division of a web page like: menu bar,side bar,content float left, content float right etc.

Float Property has following  three values:

1. Float: left

2. Float: right

3. Float: none

An Example of CSS Float: ‘left’ &’right’

style.css file

#content         /* External css start from here*/

{

width: 900px;

height: 300px;

}

#content-left{

width:300px;
height:300px;

float:left;
}

#content-right
{

width:278px;
height:300px;

float:right;

}

index.html file:

<html>
<head>
<title>CSS Float Example</title>

<link href=”style.css” rel=”stylesheet” type=”text/css”/>

/*external css file call here*/

</head>

<body>

<div id=”content”>

<div id=”content-left”>
<img src=”food3.jpg” />

</div>

<div id=”content-right”>

<img src=”food3.jpg” />

</div>

</div>

</body>
</html>

Browser Output of the above HTML  code with float: left & right is:

float

Related Post or  you may interest