How to display an element as an inline element.
<html>
<head>
<style type=”text/css”>
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>this is text.</p>
<p>this is second text.</p>
<div>this is div tag!</div>
</body>
</html>
How to use image float to the right in a paragraph.
<html>
<head>
<style type=”text/css”>
img
{
float:right
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src=”logocss.gif” width=”95″ height=”84″ />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Hw to use to the right in a paragraph. Add border and margins to the image.
<html>
<head>
<style type=”text/css”>
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
In the paragraph below, the image will float to the right. A dotted black border is added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>
<p>
<img src=”logocss.gif” width=”95″ height=”84″ />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</body>
</html>
The first letter of a paragraph float to the left and style the letter.
<html>
<head>
<style type=”text/css”>
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
How to use float with a list of hyperlinks to create a horizontal menu.
<html>
<head>
<style type=”text/css”>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href=”#” >Link one</a></li>
<li><a href=”#” >Link two</a></li>
<li><a href=”#” >Link three</a></li>
<li><a href=”#” >Link four</a></li>
</ul>
<p>
this is example.plz try this tag.
</body>
</html>
How to make a table element collapse.
<html>
<head>
<style type=”text/css”>
tr.coll
{
visibility:collapse
}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class=”coll”>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
How to use clear the sides of other floating elements.
<html>
<head>
<style type=”text/css”>
img
{
float:left;
clear:both;
}
</style>
<img src=”logocss.gif” width=”95″ height=”84″ />
<img src=”logocss.gif” width=”95″ height=”84″ />
</body>
</html>