CSS: Layout
by Mariella S. Reyes
OBJECTIVES
Learn about element positioning
Learn about offset and float
Learn position and float properties
Element Positioning
Position property allows an object or
element precisely on a page. There are
four position schemes that you can use,
static, relative, absolute and fixed. The
position can also follow or inherent the
specified of the body.
Default
position
Relative
top: 100px;
Left: 100px
Absolute Fixed
top: 100px top: 100px
left: 100px left: 300px
CSS POSITION PROPERTY
Property Value Description
Position: Static The default or normal position of an
object if one would not specify a
position.
Position: Relative The position of the box relative to where
the default or normal position of an
object.
Position Absolute The position is defined by the values
where the position of the element would
ne from the specified reference point, e.g.
from the left, from the top.
Position Fixed The same as the absolute position, the
only difference is that the object is
“fixed” and will not move with the scroll
action of the page.
OFFSET
Offset property allows you to set up the
distance of the specified element from
another element. The offset property
works together with the position property.
Before you can use an offset property,
one has to set up the position property
first. Below is the list of the different offset
property.
CSS OFFSET PROPERTY
Property Value Description
top <value> Sets how far the box’ top content is offset
from another element which may be the
edge of the page.
right <value> Sets how far the box’ right content is
offset from another element
bottom <value> Sets how far the box’ bottom content is
offset from another element
left <value> Sets how far the box’ left content is offset
from another element
Using the position and offset property one can actually
create a table purely in CSS even without using HTML
table set up commands.
div#left
width: 270px;
height: 600px;
position: absolute;
top: 120px
left: 20 px;
div#right
width: 400px;
height: 700px;
position: absolute;
top: 125px
left: 25 px;
FLOAT
Float property will allow you to control
where a specified block element will be
located pr placed on the page and where
the other elements will be positioned in
relation to the said block. When using the
float property it is important to set the
width of the block for better control of the
float.
CSS FLOAT PROPERTY
Property Value Description
float left The specified block element “floats” to
the left and all the other elements near it
will float away from the block
float right The specified block element “floats” to
the right and all the other elements near
it will float away from the block
float none The option, specified block element will
take the space it requires and nothing
flows to the right or left of it. The other
elements will be placed below it.
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet. float: right
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet. Email
is the transmission of electronic messages over the internet. Email is the
float: left
transmission of electronic messages over the internet. Email is the transmission
of electronic messages over the internet.
float: none
Email is the transmission of electronic messages over the internet. Email is the
transmission of electronic messages over the internet. Email is the transmission of
electronic messages over the internet. Email is the transmission of electronic messages
over the internet.
Div#left
width: 300px;
float: left;
Div#right
width: 300px;
END
