CSS1Home Properties
BoxProperties Next Prev
Chapter 3.4.4: CSS1 Box Other Properties
TOP
Other Properties
The box properties set the size, circumference and position of the boxes that
represent elements. See Chapter 2: CSS Formatting
Model for examples on how to use the box properties.
The 'width' and 'height' properties set the size of the box, and the 'float'
and 'clear' properties can alter the position of elements.
TOP
'width'
|
Value
|
<length> | <percentage> | auto
length : Defines the width in px, cm, etc.
% : Defines the width in % of the parent element's width
auto : User Agent (browser) calculates the actual width
Netscape 4.0, Internet Explorer 4.0
Notes in IE 4.0: This property does not work with inline elements, checkboxes,
radiobuttons, lists, and list items.This property works with the div element,
but not with other block elements
Note in IE 5.0: This property works with block elements, inline elements,
checkboxes, radiobuttons
Note in Netscape 4.0+: This property does not work (properly) with inline
elements, form fields, images, and definition lists
|
|
Initial
|
auto |
|
Applies to
|
block-level and replaced elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to parent element's width
|
This property can be applied to text elements, but it is most useful with replaced
elements such as images. The width is to be enforced by scaling the image if
necessary. When scaling, the aspect ratio of the image is preserved if the 'height'
property is 'auto'.
| IMG.icon { width: 100px } |
If the 'width' and 'height' of a replaced element are both 'auto', these properties
will be set to the intrinsic dimensions of the element.
Negative values are not allowed.
|
Examples:
This paragraph has <p style="width: 50%">...</p>.
This line is added to test the width. This line is added to test the width.
This line is added to test the width. This line is added to test the width.This
line is added to test the width.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This paragraph has <p style="width: 500px">...</p>.
This line is added to test the width. This line is added to test the width.
This line is added to test the width. This line is added to test the width.This
line is added to test the width.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This paragraph has a <font style="width: 500px">...</font>.
START HERE>This line is added to test
the width. This line is added to test the width. This line is added to
test the width. This line is added to test the width.This line is added
to test the width.<END HERE.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
|
TOP
'height'
|
Value
|
<length> | <percentage> | auto
length : Defines the height in px, cm, etc.
% : Defines the height in % of the containing block
auto : User Agent (browser) calculates the actual height
Netscape 6.0, Internet Explorer 4.0
Notes in IE 4.0+: This property does not work with inline elements, textfields,
passwords, checkboxes, radiobuttons, lists, and list items. This property
works with button, div, fieldset, hr, iframe, img, input, object, span,
table, textarea, and tr elements
Notes in IE 5.0: This property works with inline elements, passwords,
textfields, checkboxes, and radiobuttons. This property does not work
properly with lists and list items
|
|
Initial
|
auto |
|
Applies to
|
block-level and replaced elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to parent element's height |
This property can be applied to text, but it is most useful with replaced elements
such as images. The height is to be enforced by scaling the image if necessary.
When scaling, the aspect ratio of the image is preserved if the 'width' property
is 'auto'.
| IMG.icon { height: 100px } |
If the 'width' and 'height' of a replaced element are both 'auto', these properties
will be set to the intrinsic dimensions of the element.
If applied to a textual element, the height can be enforced with e.g. a scrollbar.
Negative values are not allowed.
CSS1 core: UAs may ignore the 'height' property (i.e., treat it as 'auto')
if the element is not a replaced element.
|
Examples:
This paragraph has <p style="height: 50%">...</p>.
This line is added to test the height. This line is added to test the height.
This line is added to test the height. This line is added to test the height.This
line is added to test the height.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This paragraph has <p style="height: 100px">...</p>.
This line is added to test the height. This line is added to test the height.
This line is added to test the height. This line is added to test the height.This
line is added to test the height.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This paragraph has <p style="height: 5px">...</p>.
This line is added to test the height. This line is added to test the height.
This line is added to test the height. This line is added to test the height.This
line is added to test the height. This line is added to test the height. This line is added to test the height.
This line is added to test the height. This line is added to test the height.This
line is added to test the height. This line is added to test the height. This line is added to test the height.
This line is added to test the height. This line is added to test the height.This
line is added to test the height.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This paragraph has a <font style="height: 200px">...</font>.
START HERE>This line is added to test the
height. This line is added to test the height. This line is added to test
the height. This line is added to test the height.This line is added to
test the height.<END HERE.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
This paragraph has a <font style="height: 5px">...</font>.
START HERE>This line is added to test
the height. This line is added to test the height. This line is added
to test the height. This line is added to test the height.This line is
added to test the height. This line
is added to test the height. This line is added to test the height. This
line is added to test the height. This line is added to test the height.This
line is added to test the height.This
line is added to test the height. This line is added to test the height.
This line is added to test the height. This line is added to test the
height.This line is added to test the height.<END HERE.
This is a normal paragraph. This is a normal paragraph. This is a normal
paragraph. This is a normal paragraph. This is a normal paragraph. This
is a normal paragraph. This is a normal paragraph. This is a normal paragraph.
|
TOP
'float'
|
Value
|
left | right | none
left : The image or text moves to the left in the parent element
right : The image or text moves to the right in the parent element
none : The image or the text will be displayed just where it occurs in
the text
Netscape 4.0, Internet Explorer 4.0
Note in Internet Explorer 4.0: This property does not work with inline
elements, lists, list items, tables, or table cells
Note in Internet Explorer 5.0: This property works with inline elements,
lists, and list items
Note in Netscape 4.x: This property does not work properly with inline
elements, select, textarea, lists, list items, tables, or table cells
|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
With the value 'none', the element will be displayed where it appears in the
text. With a value of 'left' ('right') the element will be moved to the left
(right) and the text will wrap on the right (left) side of the element. With
a value of 'left' or 'right', the element is treated as block-level (i.e. the
'display' property is ignored).
The float property sets where an image or a text will appear in another element.
Note: If there is too little space on a line for the floating element, it will
jump down on the next line, and continue until a line has enough space.
Note: Content, background, and borders of inline elements should go in front
of the float. Background and borders of a block element should go behind the
float, but the content of the block element should go in front of the float.
IMG.icon {
float: left;
margin-left: 0;
}
|
The above example will place all IMG elements with 'CLASS=icon' along the left
side of the parent element.
This property is most often used with inline images, but also applies to text
elements.
|
Example:
<img style="float: right" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image. Insert an image
floating on the right so the texts float on the left of the image. Insert
an image floating on the right so the texts float on the left of the image.
Insert an image floating on the right so the texts float on the left of
the image.
|
|
Example:
<img style="float: left" src="image/bgpans.gif"
width="10%" height="auto">. Insert an image floating
on the left so the texts float on the right of the image. Insert an image
floating on the left so the texts float on the right of the image. Insert
an image floating on the left so the texts float on the right of the image.
Insert an image floating on the left so the texts float on the right of
the image. Insert an image floating on the left so the texts float on
the right of the image. Insert an image floating on the left so the texts
float on the right of the image.
|
|
Example:
<img style="float: none" src="image/bgpans.gif">.
Insert an image floating none. Insert an image floating none. Insert an
image floating none. Insert an image floating none. Insert an image floating
none. Insert an image floating none. Insert an image floating none. Insert
an image floating none. START HERE><END
HERE. Insert an image floating none. Insert an image floating none. Insert
an image floating none. Insert an image floating none. Insert an image
floating none. Insert an image floating none. Insert an image floating
none. Insert an image floating none.
|
|
Example:
<img style="float: right" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image.
New Paragraph: Insert an image
floating on the right so the texts float on the left of the image. Insert
an image floating on the right so the texts float on the left of the image.
Insert an image floating on the right so the texts float on the left of
the image.
|
TOP
'clear'
|
Value
|
none | left | right | both
none : Allows floating elements on both sides
left : No floating elements allowed on the left side
right : No floating elements allowed on the right side
both : No floating elements allowed on either the left or the right side
Netscape 4.0, Internet Explorer 4.0
|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This property specifies if an element allows floating elements on its sides.
More specifically, the value of this property lists the sides where floating
elements are not accepted. With 'clear' set to 'left', an element will be moved
below any floating element on the left side. With 'clear' set to 'none', floating
elements are allowed on all sides.
|
Example:
<img style="float: right" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image. Insert an image
floating on the right so the texts float on the left of the image. <span
style="clear: right"></span>Insert
an image floating on the right so the texts float on the left of the image.
Insert an image floating on the right so the texts float on the left of
the image.
|
|
Example:
<img style="float: left" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image. Insert an image
floating on the right so the texts float on the left of the image. <font
style="clear: left"></font>Insert
an image floating on the right so the texts float on the left of the image.
Insert an image floating on the right so the texts float on the left of
the image.
|
|
Example:
<img style="float: left" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image. Insert an image
floating on the right so the texts float on the left of the image. <font
style="clear: both"></font>Insert
an image floating on the right so the texts float on the left of the image.
Insert an image floating on the right so the texts float on the left of
the image.
|
|
Example:
<img style="float: left" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image. Insert an image
floating on the right so the texts float on the left of the image. <br
style="clear: both">
Insert
an image floating on the right so the texts float on the left of the image.
Insert an image floating on the right so the texts float on the left of
the image.
|
|
Example:
<img style="float: left" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image. Insert an image
floating on the right so the texts float on the left of the image. <br
style="clear: left">
Insert
an image floating on the right so the texts float on the left of the image.
Insert an image floating on the right so the texts float on the left of
the image.
|
|
Example:
<img style="float: right" src="image/bgpans.gif"
width="155" height="134">. Insert an image floating
on the right so the texts float on the left of the image.
New Paragraph: <p style="clear: right">...</p>
Insert an image floating on the right so the texts float on the left of
the image. Insert an image floating on the right so the texts float on
the left of the image. Insert an image floating on the right so the texts
float on the left of the image.
|
TOP CSS1Home Properties
BoxProperties Next
Prev