|
Home >> Tutorials/FAQs >> CSS Tutorials >> Index
CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements
By: FYICenter.com
Part:
1
2
3
4
5
6
7
8
9
(Continued from previous part...)
What Is a Floating Element?
A floating element is a block element or in-line element being specified with the "float" style property.
If "float: left" is specified, a floating element will be formatted at the left margin of the parent element.
The current block and sub sequent blocks will be floated on the right side of this floating element.
If "float: right" is specified, a floating element will be formatted at the left margin of the parent element.
The current block and sub sequent blocks will be floated on the right side of this floating element.
Below is a good example of a floating block element and a floating inline element:
<html><head>
<style type="text/css">
DIV.page {width: 350px; border: 1px solid black}
P {margin: 0px}
P#p1 {float: left; width: 100px}
P#p1 {background-color: #ffdddd}
P#p2 {background-color: #ddffdd}
IMG#icon {float: right}
</style>
</head><body><div class="page">
<H3>Floating Elements</H3>
<p id=p1>Block element <P> floated to the left.</p>
<p id=p2><img id=icon src=moonrise.jpg>
Inline element <IMG> floated to the right.
Welcome to dev.FYIcenter.com, the resource
center for developers like you! Hope you like it,
and come back to this again. Submit your favor resources.
Remember to tell your friends about this site
www.FYIcenter.com.</p>
<div></body></html>
Save this document as floatingElements.html, and view it with a browser,
you will see something like this:
Hot To Specify the Content Box Size of a Block Element?
If you want to control the size of the content box of a block element,
you can use the "width" and "height" properties as shown below:
- {width: 300px} - Specifies the content box to be 300px wide.
- {height: 200px} - Specifies the content box to be 200px high.
The HTML and CSS document below shows you a good example of how to specify content box size
of on a <P> tag:
<html><head>
<style type="text/css">
H1 {font-size: 20px}
DIV.page {width: 425px; border: 1px solid black}
TABLE#out {background-color: #ffdddd}
TD#box {border: 1px solid black}
P#box {width: 300px; height: 200px;
background-color: #ddddff}
TD.legend {height: 29px; background-color: #ffffff}
TD.legend#content {height: 200px}
</style>
</head><body><div class="page">
<H1>Content Box Width and Height</H1>
<table id=out><tr>
<td id=box><p id=box><script language="JavaScript">
for (i=0; i<10; i++) {
for (j=0; j<10; j++) {
document.write(j+' ');
}
}
</script></p></td>
<td><table>
<tr><td class=legend id=content>- Content box</td></tr>
</table></td>
</tr></table>
<p align="right">By FYICenter.com</p>
<div></body></html>
Save this document as contentBox.html, and view it with a browser,
you should see the content box being formatted as 300x200 pixels as shown below:
(Continued on next part...)
Part:
1
2
3
4
5
6
7
8
9
|