Placing Images Easy to put an image on a line by itself May want it next to text Float the image float left or right ALWAYS put the image before the text Floating Elements Floated horizontally ID: 478917
Download Presentation The PPT/PDF document "Float" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
FloatSlide2
Placing Images
Easy to put an image on a line by itself
May want it next to text
Float the image -- float: left (or right);
ALWAYS put the image
before
the textSlide3
Floating Elements
Floated horizontally:
left or
right
Will
move as far to the left or right as it
can
Example: inside a div or section
Elements
after
will
flow around
it
Elements
before
it not affectedSlide4
Float
Can be applied on any element
Pictures (
img
, figure)
Sidebars (div, section, header)
Navigation buttons (list items)
Floatutorial
especially goodSlide5
To Stop FLOAT
Clear property
S
pecifies
which sides of an element other floating elements are
not
allowed
Left, right, both
Can be applied to any element
Images to create a vertical stack
Headers to break up the page into
sections
To end a float
Sometimes create a div just
to clear!