The code is,
<p style="font-size:1.5em"><u> An example to demonstrate float:right</u></p>
<div style="border-width:5px; color:rgb(200,0,0);border-color:rgb(100,0,0); border-style:ridge; width:20em; height:8em; float:right">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
</div>
And the output is,
An example to demonstrate float:right
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
And now we see the effect of float:left.
Code is,
<p style="font-size:1.5em"><u> An example to demonstrate float:left</u></p>
<div style="border-width:5px; color:rgb(200,0,0);border-color:rgb(100,0,0);
border-style:ridge; width:20em; height:8em; float:left">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
</div>
And output is,
An example to demonstrate float:left
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
Combining together,
<p style="font-size:1.5em"><u> An example to demonstrate float:left</u></p>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:20em;
height:8em;
float:left">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
</div>
<p style="font-size:1.5em"><u> An example to demonstrate float:right</u></p>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:20em;
height:8em;
float:right">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
</div>
output,
An example to demonstrate float:left
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
An example to demonstrate float:right
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
We can also divide a webpage into several columns. Like we can divide a page into 4 columns. The CSS then look like,
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left " >
This is a simple text.
</div>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left">
This is a simple text.
</div>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left">
This is a simple text.
</div>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left">
This is a simple text.
</div>
This is a simple text.
This is a simple text.
This is a simple text.
This is a simple text.
In the example of left and right example we see the right elements are moved up to fill the available space which is freed from the left box. This is default behaviour. In CSS float, by default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. We can change this behaviour by using property clear.
The property clear can have the values left, right, both or none. The principle is, if clear is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.
Below is the example,
<p style="font-size:1.5em"><u> An example to demonstrate float:left</u></p>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:33%;
height:8em;
float:left " >
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
</div>
<p style="font-size:1.5em; clear:both; "><u> An example to demonstrate float:right</u></p>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:33%;
height:8em;
float:right">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
</div>
output is,
An example to demonstrate float:left
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
An example to demonstrate float:right
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
Related Documents
No comments:
Post a Comment