rssHow to float your divs?
You can use the CCS style “float” to influence the layout of your divs. This tutorial aims to provide a good understanding of how this works. At the end we will see an example of using float to get a 3-column layout.
Used literature: http://css.maxdesign.com.au/floatutorial/
First some definitions
Inline (“text-level”) and block-level elements are the two main elements on a webpage. First let’s see to which category some common elements belong:
- Inline elements are for example: a, em, strong, span
- Block level elements are for example: div, h1…h6, p, ul, ol, li, table, tr, td, th, blockquote
Block-level elements always start on a new line, while inline elements are present within a line. Most browsers insert a blank line between block-level elements (like between paragraphs (p)). Block-level elements can contain data, other block-level elements (with the exception of the paragraph element: p) or inline elements while inline elements can only contain data or other inline elements.With CSS the behaviour of both elements is determined. Also, with CSS, elements can be changed from blovk-level to inline and vice versa.Globally you can say that Block-level elements define the structure of your document while inline elements define the appearance of your data.
Examples
Normally the flow of a document is top-down: all elements (block-level and inline) are structured according to this principle.
See: /html/tutorials/float/normal.html
Now, for example, let’s take the second element out of the normal flow. We position it absolute (somewhere in the middle of the page). All elements which are still in normal flow will still be and ignore the element in abnormal flow.
See: /html/tutorials/float/abnormal.html
When we make an element float it will always be treated as a block level element and normal flow is influenced. For example, when we make the second element float to the right we can see normal flow being influenced:
See: /html/tutorials/float/float_right.html
The same counts for floating the second element to the left.
See: /html/tutorials/float/float_left.html
When we don’t want other elements flowing around our float we can use the style “clear” to this element. If we give our third element a “clear: right” this means: don’t use the space left of an earlier element which floats to the right.
See: /html/tutorials/float/float_right_clear.html
The same counts for not using the space left by an left floating element with “clear: left”.
See: /html/tutorials/float/float_left_clear.html
With this knowledge it’s easy to use a left floating element and a right floating element to create a three column layout. Just let the second element float to the left ( or right), the third element float to the right (or left). The fourth element will automatically fill up the space left inbetween the second and third element.
See: /html/tutorials/float/multiple_floats.html
With some extra layout we now already have a first design for our website.