.

understanding css blocks

The following shows how paragraphs and divs break the flow
of text:

1. freetxt

paragraph 2.1 – display: block

freetxt

2. freetxt

division 1.1 with default block display

freetxt

The following shows how paragraphs and divs can be "display:
inline" the keep the flow of text:

(carefully see how the red lines break the flow – they are setup
as "display: block" )

freetext

division [display:inline]

freetext

paragraph [display:inline]

freetext

division [display:inline]

paragraph [display:inline]

division [display:inline]

paragraph [display:inline]

division [display:block]

paragraph [display:inline]

division [display:inline]

freetext

paragraph [display:inline]

paragraph [display:block]

division [display:inline]

freetext

paragraph [display:inline]

division [display:inline]

The following shows how floating divs work (DIV1 created
before DIV2 etc)

left floats:

DIV1 [float: left]
DIV2 [float: left]
DIV3 [float: left]
DIV4 [float: left]

right floats:

DIV1 [float: right]
DIV2 [float: right]
DIV3 [float: right]
DIV4 [float: right]

mixed floats in diffrent orders:

DIV1 [float: left]
DIV2 [float: right]
DIV3 [float: left]
DIV4 [float: right]
DIV1 [float: right]
DIV2 [float: left]
DIV3 [float: right]
DIV4 [float: left]

not all floating:

DIV1 [float: left]
DIV2 [float: right]
DIV3 [float: none]
DIV4 [float: left or none] .. on a new line due to DIV3 not floating

too many mixed floats for 1 line:

DIV1 [float: left]
DIV2 [float: right]
DIV3 [float: left]
DIV4 [float: right]
DIV5 [float: left]
DIV6 [float: right]
DIV7 [float: left]
DIV8 [float: right]
DIV9 [float: left]
DIV10 [float: right]

Floats breaks (Clear: ….):

DIV1 [float: left]
DIV2 [float: right]
DIV3 [float: left; clear: right]
DIV4 [float: right]
DIV5 [float: left]

Floats breaks (Clear: ….):

DIV1 [float: left]
DIV2 [float: right]
DIV3 [float: left; clear: left]
DIV4 [float: right]
DIV5 [float: left]

Floats breaks (Clear: ….):

DIV1 [float: left]
DIV2 [float: right]
DIV3 [float: right; clear: right]
DIV4 [float: right]
DIV5 [float: left]

Floats breaks (Clear: ….):
see

DIV1 [float: left]
DIV2 [float: right]

DIV3 [float: right; clear: left]

 

DIV4 [float: right]
DIV5 [float: left]

see http://www.w3.org/TR/REC-CSS1/ for more on CSS

What's your thoughts on this?

*

Protected by WP Anti Spam