Home > CSS > Size and Position Propertiesprinter version

CSS Size and Position Properties

These CSS properties allow fine control over the size and position of HTML elements, particularly <div> and <span>.

Units of Measurement

Units of measurement, when applied to HTML elements, may either be relative or absolute. Absolute units have no real meaning on a computer screen so are not covered here. Relative units include ...

em, en and ex are units historically based on metal type. In style sheets they act as multiples of a default size e.g. If the default size were 10 pixels then 2em would be 20px.
px is straightforwardly a size in pixels which will show as a different physical size on different screen resolutions.

Example of Setting the Size and Position Properties of a Class

.element_class_name {
position: absolute;
width: 400px;
height: 200px;
}

Property	Description	Values
width	Sets the width of the element. If length is used it must be set to units of measurement.	auto length percentage
height	Sets the height of the element. If length is used it must be set to units of measurement.	auto length percentage
clear	Forces following elements to be displayed below the element instead of wrapping round it.	none both left right
clip	Sets which part of the element is visible. Anything outside the defined rectangle is clipped. The rectangle is defined with rect(top,right,bottom,left) using units of measurement.	auto rect
display	This determines whether an element is rendered or not. none means it is not rendered. inline means it is rendered inline with surrounding elements block means it is rendered with a line to itself.	none inline block
float	This causes following elements to wrap to the left or right of the element.	none left right
left	Sets the left position of the element in relation to its containing element. If length is used it must be set to units of measurement.	auto length percentage
right	Sets the right position of the element in relation to its containing element. If length is used it must be set to units of measurement.	auto length percentage
top	Sets the top position of the element in relation to its containing element. If length is used it must be set to units of measurement.	auto length percentage
overflow	This determines how the element will display its content if the content is larger than the element. auto means the browser will decide what to do. visible means the content will be seen outside the element hidden means the content will be clipped to fit the element. scroll means that the content is clipped but scrollbars will allow the clipped part to be viewed.	auto visible hidden scroll
z−index	This controls the stacking order of positioned elements that overlap. Higher numbers always appear above lower numbers in the stacking order.	auto number

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP