Style Sheets Properties Guide
=Box Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

width | height | float | clear
Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Box properties treat all block-level formatting elements like a virtual 'box'. The height and width of the box is determined by (going from inner-most dimension outward) the height and width of the contained elements (text and/or images) plus heights and widths for space around the element ('padding'), plus the height and widths created by added borders ('border'), along with exterior margin values ('margin') relative to elements exterior to the virtual box.

This portion of the Box properties allows size control over elements as well as flow control over subsequent elements in relation to the current element.


width [ IE4B2 | N4B3 ]
Applicable Elements: Block-Level and Replaced Elements
HTML Equivalent: WIDTH attribute used in Replaced Elements.
Inherit From Parent: No
Default Value: auto unless the element has an assigned dimension.
What Is It?
This property may be applied to text elements, but is more applicable to Replaced Elements (images, etc.) The width specified may scale the element to fit the given dimension. If the 'height' property has a value of 'auto', the original aspect ratio of the element should be preserved. The spec says this should not apply to in-line elements
Example
Ext/Doc: img.size1 { width: 75px }
In-Line:  <img STYLE="width: 75px">
Browser Notes
- Netscape 4 Beta 2 Very limited support for this property. It supports it for the HR tag only.
- Netscape 4 Beta 3 The box properties appear to only work with in-line and block level elements, but not at all with replaced elements.
- Internet Explorer 4 Beta 1 Limited support exists for the property in this version, and appears to have many implementation holes. These are fixed in Beta 2.
Allowed
Values
 Value
Type
 Browser
Support
 Description
auto calculated IE4B2 | N4B3 The width of the element will be determined by the browser.
[length] calculated IE4B2 | N4B3 Refers to either an absolute width measurement or a relative measurement based on the current element's font size. Please see the section on Length Units for more details on acceptable unit measures.
[percentage] calculated IE4B2 | N4B3 Refers to a percentage of the parent element's width.


height [ IE4B2 | N ]
Applicable Elements: Block-Level and Replaced Elements
HTML Equivalent: HEIGHT attribute used in Replaced Elements.
Inherit From Parent: No
Default Value: auto
What Is It?
This property may be applied to text elements, but is more applicable to Replaced Elements (images, etc.) The height specified may scale the element to fit the given dimension. If the 'width' property has a value of 'auto', the original aspect ratio of the element should be preserved.
Example
Ext/Doc: img.size2 { height: 75px }
In-Line:  <img STYLE="height: 75px">
Browser Notes
- Internet Explorer 4 Beta 1 Limited support exists for the property in this version, and appears to have many implementation holes. These are fixed in Beta 2.
Allowed
Values
 Value
Type
 Browser
Support
 Description
auto calculated IE4B2 | N The height of the element will be determined by the browser.
[length] calculated IE4B2 | N Refers to either an absolute width measurement or a relative measurement based on the current element's font size. Please see the section on Length Units for more details on acceptable unit measures.
[percentage] calculated IE4B2 | N Refers to a percentage of the parent element's height.


float [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: < ALIGN=right,left> attributes used in Replaced Elements.
Inherit From Parent: No
Default Value: none
What Is It?
This property allows other elements to wrap around an element while it "floats" along the right or left side of the display device. When a value of 'left' or 'right' is assigned, the element is treated as Block-Level (the 'display' property will be ignored.)
Example
Ext/Doc: img.test { float: left }
In-Line:  <img SRC="image.gif" STYLE="float: left">This is text following the image. It floats on the right.
Browser Notes
- Netscape 4 Beta 3 This appears to only work with in-line and block level elements, but not at all with replaced elements.
Allowed
Values
 Value
Type
 Browser
Support
 Description
none explicit IE4B2 | N4B3 The element will be displayed in-line where it appears in the text.
left explicit IE4B2 | N4B3 The element will be positioned using 'margin' properties, and text following the element will wrap around it on the right side.
right explicit IE4B2 | N4B3 The element will be positioned using 'margin' properties, and text following the element will wrap around it on the left side.


clear [ IE4B2 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <br CLEAR= left|right|all>
Inherit From Parent: No
Default Value: none
What Is It?
This property specifies whether the current element allows elements to float along its sides. The values for this property indicate which sides of the element do not allow floating elements.
Example
Ext/Doc: address { clear: both }
In-Line:  <address STYLE="clear: both">This is a test document</address>
Allowed
Values
 Value
Type
 Browser
Support
 Description
none explicit IE4B2 | N4B2 Floating elements are allowed on both sides of the current element.
left explicit IE4B2 | N4B2 The current element will be moved below any floating elements on the left-hand side.
right explicit IE4B2 | N4B2 The current element will be moved below any floating elements on the right-hand side.
both explicit IE4B2 | N4B2 The current element will be moved below any floating elements on either side.


Boring Copyright Stuff....