[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

All topic groups:
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groups > Front page of CSS-guide > Guide pages > 11. What is the visual formatting model of CSS2 > Div + float (section 1/3)

Div + float

The property float moves elements to the right or left - elements as if "float" to those directions. At this way defined elements should be at the same horizontal level as elements without the property float. The heights of floated elements should not affect the height of the parent element. All elements including normally inline level elements should behave as block level elements. Together with the property float is commonly used the property clear. In the page mentioned below are some examples, which use these properties:

W3C: CSS1 Test Suite: 5.5.25 float[Pw].

Below is an example, which use these properties: ([M][S][Pw]):

img.icon
{float: left; /* the image floats on the left - the another value is right */
clear: left;} /* the left side of the image is "cleaned" from other elements (even if there could be space for many floating element in the same row, all floating elements, are now in own rows) - other values are left and all (there is nothing on the right or left) */

Float is sensible to use with the common block element DIV by creating the basic structure into frame or table free documents. DIV-elements could be made "floating" block elements, which include link lists. The text would be written besides the floating box and there would be no need to use tables into basic formatting into frame free pages (strictly thought to use tables as creating the basic structure is misuse of them).

Floating elements or tables?

In fact it is possible to create the basic structure dynamic by dividing the content into floating sections. In 640x480 and 800x600 screen is only one column on the screen, but in 1024x768 or larger screen can be two or more columns (an example page[S] - use as wide screen as you can).

This idea can be applied in navigation frames, which don't have exact defined width values. I have used the property float with the element IFRAME, which has main navigation links.

CSS2 gives the possibility to set to block elements maximum and minimum width and height values. I used frames, because they make the same as max-width CSS-property. Frames have however disadvantages, why I don't use them anymore except in exceptional cases.

I give you an example, which is intended to use in pages, which have BODY class CssSite. The basic text is inside DIV-elements:

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033; padding:10px;}

After defining the basic layout element, the author defines two nested blocks as in the example below ([M][S][Pw]):

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033;padding:10px;}
body.CssSite div div {border:1px solid #660033; margin:0 10px 0 0; float:left; width:70px; height:200px; clear:left;} /* in this block, which is inside the previous block can place links; Next blocks can be simple one level blocks like paragraphs, because it is not necessary to present links more than once */

These kinds of blocks could be in many situations much more better than tables, which have fixed width value. There would not be a horizontal scroll bar in narrow windows, but the width of the text would however be under the control of the author.

Browser-specific notes:

  1. The functionality of float and clear properties are quite bad in Netscape 4.x. If several elements have in the same row several floating elements browser set them to the same "pile". Go through the CSS1 test suite of W3C concerning the float property.

    W3C: CSS1 Test Suite: 5.5.25 float[Pw].

  2. MS IE 4.x for Windows can't put a large quantity of floated elements into several rows. It might be more sensible to use tables, if the author doesn't want to create free scaling text. If you want flexible width values, use percentage values.

  3. If the basic structure base on floating elements some browsers put randomly unnecessary scroll bars. The system works relative well at least in Opera 4.x+, MS IE 5.5+ and Mozilla Gecko Windows browsers (presumably also in many Mac and Linux browsers).

  4. If ordinary inline level or block level elements are set to float, they need at least the width property. Otherwise browsers give them totally different width values.

  5. The height of floating elements might increase in some MS IE browsers also the height of the container (parent) element. This matter is fixed at least in MS IE 6.0 for Windows.

  1. In some browser floated elements goes a little bit downward, not directly to the left or right, when the position of floated elements is not the same in all browsers.

  2. The property clear doesn't work correctly at least in MS IE 5.x for Windows[S] and Netscape 6.1 browsers. In MS IE 4.x for Windows the property clear cause additional line breaks (also float might also cause them randomly).

  3. Netscape 4.x or older browser don't IFRAME elements. For such browsers, which don't support the IFRAME element I have defined alternative links.

  4. Max-width works on the base of my tests only in Opera 4.x+, Mozilla Gecko and Konqueror (Linux) browsers (on the base of a screen capture also in Safari (Mac)) browsers.

  5. Because MS IE doesn't support the display (I handle it later) property at XML-level, the only possibility to create flexible structure to XML-documents is to use the float property. It is remarkable to remember, that DIV + float looks completely different in browsers, which don't support CSS. Fast downloaded How to set CSS for table elements[S] are in that means backward compatible, but they work in MS IE only in (X)HTML-documents. In general the another way to replace frames is to use the position property, which I handle next.

[Top]