This is a standard division of code without any positions, offsets, margins, or width. As such, it spans the entire width of the page
This is a standard division of code without any positions, offsets, or margins. However, it does have a width of 300px.
As such this division only takes up that much space even when there are multiple paragraphs in this division.
The next few divions (3,4,5) are going to be just like this division except they will have different background/text colors
This is a standard division of code without any positions, offsets, or margins. However, it does have a width of 300px.
As such this division only takes up that much space even when there are multiple paragraphs in this division.
The next few divions (3,4,5) are going to be just like this division except they will have different background/text colors
This is a standard division of code without any positions, offsets, or margins. However, it does have a width of 300px.
As such this division only takes up that much space even when there are multiple paragraphs in this division.
This divison, like the next two is just like division 3 except it has a different background/text colors
This is a standard division of code without any positions, offsets, or margins. However, it does have a width of 300px.
As such this division only takes up that much space even when there are multiple paragraphs in this division.
This divison, like the last two is just like division 3 except it has a different background/text colors
The next few divisions are going to be used to explain "float". "float" attribute allows a division to align all the way to the left or to the right edges of the screen.
"floated" divisions like previously seen "absolute" "posiiton" divisions are ignored in the screen flow. The subsequent divisons start as if the "floated" divions don't exist are overlapped by the "floated" divison. The difference between "absolute" "position" divisions, and the "floated" divisions is that the subsequent "non-floated" divisions start butted against the "floated" division, in the same line, as opposed to a separate line. In other words they're not forced in a spearate paragraph, but appeat to a continuation of the same divison.
"float" also causes the following "non-floated" division to scoot right next to it horizontally (left/right). In our example this would be division 11 onwards. As such, the system forces divsion 11 to occupy horizontal space on the screen vertically starting from the same position in the screen flow as the previously "floated" divisons. If needed, the system will cause other floated divison to wrap around if there isn't space.
All subsequent "non-floated" divison that follow, in our example divison 12 onwards, start like any other division with default spacing between the last divison, but if there is overlap from a "floated" division then they will appear to be to the left/right of the "floated" divison in the same line (vertically). Also depending on how wide ("width") these subsequent "non-floated" divisions are, they will start rendering content (text, etc.) where they have horizonal space to render text without being overlapped by any another previously defined "floated" division. All in all they appear to be butted one against the other.
If the width of divison 12 was 400 then it would vertically start where it is right now, however, the content (text) would render beneath where divison 10 ends vertically (appearing to be butted against it). The reason being that the contents starts to render when it is not interrupted by any other previously defined "floated" division."
Divison 13 is also a "non-floated" division. Since it is overlapped by a previously defined "floated" divison, it will vertically start after where division 12 ends (plus the default space between divions) but appear to be butted next to the previously defined overlapping floated divison.
Had the width of Divison 13 been the same as the overlapping "floated" divison (in our example 200px) then it would start right underneath it, appearing to be butted against it (just like division 15). The reason being that no part of this "non-floated division would be wide enough to span across the width of the "floated" divisions.
Division 15 is also "non-floated" and the reason why it is not being overlapped by a previously defined "floated" division (in this case division 8, is because the style sheet linked to this divsion is using syntax of "clear: both;". As such, it clear all previous floats and will start like any other divison (with the standard default gaps between divisions.
In summary, if we want any of the "non-floated" divisons which would otherwise be butted against a previously defined "floated" division to start on a separate line then we would have to "clear" the float by using that syntax in it's style sheet. As such, if I added the syntax "clear: both" in the style sheet for diviosn 13 then it would start cleanly (without being overlapped or butted) after where divion 8 ends. It would still be butted against division 8 vertically, but not horizontally. It will start at the left edge of the screen as it will not be overlapped.
Division 8, 9, and 10 have been floated to the left. When a division is floated it appear along the left/right edge of the screen. Until the float is "cleared", the NEXT divisions appears to be budged against this division and will take up the remaining space on the screen.
As an example division 11 has not been floated, nor has any other division thereafter. However, since division 11 and 12 have not specified a width, and there is space left to the right of floated divsion 10, they appear to be scooted next to the divisions that have been floated to its left. This division, divsion 11, will take up the remaining space on the screen.
Division 12, which follows divison 11, appears to start in screen flow right after division 11 ends + the normal spacing between divisions. However, since division 8 would overlap any divisions that follow it, division 12 even though it starts at the right position vertically, is scooted all the way to the right so that it appears butted against division 10.
This division is also floated. However the difference between this divsion and divisions 8 and 10 is that this division has a margin. If a division has a margin it is honored and is not squished against by the subsequent divisions, whether those subsequent division are floated (divison 10), or not floated (divsion 11 onwards).
This is a divisoin with multiple paragraphs. Furthermore, it has a float-left attribute so that this division is butted against the left edge of the screen.
This is paragraph #2
This is a non-floated divsion. I am going to create multiple paragraphs in this division as well but no special attributes.
This is paragraph #2
This is paragraph #3
This is paragraph #4
This is paragraph #5
This is paragraph #6
This is paragraph #7
I am going to create multiple paragraphs in this division as well but no special attributes.
This is paragraph #2
This is paragraph #3
This is paragraph #4
This is paragraph #2
This is paragraph #3
This is paragraph #2
This is paragraph #3
This is paragraph #4
This is paragraph #2
This is paragraph #3
This is paragraph #4