This is an attempt to do more with positioning.
This is some data within a division.
This is some text outside the division. Notice the division is set up with a width of 75%,
so the text-align right within the class will conform to those specifications.
This is data aligned using the class set up for that purpose.
Now I am going to use the text-align right within a paragraph which does not have any style
set for it.
This is data in a paragraph that is set up with the text-align right class
so it should appear to the right on the screen.
Since there are no width constraints on
paragraphs it should be all the way to the right. Notice that I am getting very careful
about closing paragraphs when I play with style.
This is centered
Notice again the affect of 75% width.
When dealing with HTML, information is usually loaded on the screen in the order it is
presented in the HTML file. Absolute positioning impacts this and removes elements from the
default load flow. Floating can also be used. For example, floating can move things to
the side so that other things will fill in around the floated element.
This is an example of text that is set to float.
Here is some text that we are using to test the floated text discribed above and this needs
to go on and on and on and on and on and on and on and on and on and on and on and on and
on and on and on and on and this is get very boring but it still has to go on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on.
Now we need to put in some more text to watch it flow, so here goes. Here is some text that
we are using to test the floated text discribed above and this needs
to go on and on and on and on and on and on and on and on and on and on and on and on and
on and on and on and on and this is get very boring but it still has to go on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on.
This is the floating text
Now we need to put in some more text to watch it flow, so here goes. Here is some text that
we are using to test the floated text discribed above and this needs
to go on and on and on and on and on and on and on and on and on and on and on and on and
on and on and on and on and this is get very boring but it still has to go on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on on and on and on.
This is the floating text.
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on on and on and on.
This is the floating text and
I am adding enough to make it wrap and then I can see the effects of span.
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
This will not flow and go on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on and on.