/**********************************************************\ Name : FloatingElements.css Purpose : Controls the layout of with floating elements Author : Jimmy Simonsen, Bombus Date : 2004-05-17 Modified : 2004-06-19 (version) Supports : [x] Internet Explorer 6, PC (standard complient mode) [x] Internet Explorer 5, PC [x] Internet Explorer 5, Mac [x] Netscape/Mozilla (Gecko) 6, PC [x] Netscape, Mac [ ] Opera, PC [ ] Opera, Mac \**********************************************************/ /* STANDARD MODE: */ /* KNOWN BUGS: - [IE5, Mac] Buggy when using nested float:left elements - [Mozilla 1.6, PC] Container vertical auto enclosing gets extra height in bottom (strange!) (only when container has overflow:hidden) - [IE, PC] Floating containers will not be horizontally enclosed (remain 100%) - [IE, PC] align-left or align-right doesn't work on Floating elements with 100% width - [IE, PC] align-left and align-right sometimes float over each other!? - [IE, PC/Mac] An empty container (no contents at all) will get a height (lineheight) - [Mozilla 1.6, PC] Floating containers doesn't expand when fixed size (when contents should expand it). KNOWN FEATURES: - [IE, Win] Floating elements can float up over aligned elements if space is available Possible fix: don't mix aligned and floating elements. - Centered elements takes upp all possible width. DESCRIPTION: - A floating element can be aligned on each side or floated next to previous element. - The contants around floating elements will be layed around (the floating element will take up its size and move the contents around). - The elements are normally positioned against the viewport but with a sized container their alignment can be limited. - Floating elements only works with divs. Use them as wrappers around images and tables! */ /**********************************************************\ FLOATING ELEMENTS v2.4 (Do not touch anything below. Every line has its purpose!) \**********************************************************/ /* Wraps floating element */ div.container { text-align: center; /* anru removed this section because Mac Safari errors overflow: visible; Contents will be shown even if container is smaller */ } /* FIXES: WIN-IE - fixes the escaping floats bug\*/ * html div.container { /* width: 100%; */ height: 1%; } /* END FIX */ /* FIX: NON-IE - automatically enclose any containing element (resizes top container) */ /* http://www.positioniseverything.net/easyclearing.html */ div.container:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; } /* END FIX */ /* FIX: Mac-IE - fixes the auto enclosing (include fix_mac_ie5.js!) */ div.container-after { height: 0; clear: both; overflow: hidden; } /* Position the element to the left side of parent container */ div.align-left { float: left; clear: left; position: relative; /* FIX: WIN-IE6, Gecko - contents outside parent container */ display: inline; /* FIX: WIN-IE5.x remove double margins for floating objects */ text-align: left; /* FIX: Remove text-align: center */ } /* FIX: Win-IE - remove the 3px gap \*/ * html div.align-left { /* margin-right: -3px; */ } /* END FIX */ /* Position the element to the right side of parent container */ div.align-right { float: right; clear: right; position: relative; /* FIX: WIN-IE6, Gecko - contents outside parent container */ display: inline; /* FIX: WIN-IE5.x remove double margins for floating objects */ text-align: left; /* FIX: Remove text-align: center */ } /* FIX: Win-IE - remove the 3px gap \*/ * html div.align-right { /* margin-left: 0; */ } /* END FIX */ /* Position the object to the center (will occupy the whole width) */ div.align-center { float: none; clear: both; margin-left: auto; margin-right: auto; /*position: relative;*/ /*Rem by POL 04-10-02, solve error loading pictures*/ /* FIX: WIN-IE6, Gecko - contents outside parent container */ text-align: left; /* FIX: Remove text-align: center */ } /* FIX: IE - correct box width and center (w3c box model) */ /* BUG: Doesnt' work on top container?! */ * html div.align-center { margin-left: 0px; margin-right: 0px; /*display: inline;*/ /* FIX: WIN-IE5.x - remove double margins for floating objects */ } /* END FIX */ /* Position the element to the left */ div.float-left { float: left; clear: none; position: relative; /* FIX: WIN-IE6, Gecko - contents outside parent container */ display: inline; /* FIX: WIN-IE5.x remove double margins for floating objects */ text-align: left; /* FIX: Remove text-align: center */ } /* FIX: Win-IE - remove the 3px gap \*/ * html div.float-left { /* margin-right: -3px; */ } /* END FIX */ /* Position the element to the right */ div.float-right { float: right; clear: none; position: relative; /* FIX: WIN-IE6, Gecko - contents outside parent container */ display: inline; /* FIX: WIN-IE5.x remove double margins for floating objects */ text-align: left; /* FIX: Remove text-align: center */ } /* FIX: Win-IE - remove the 3px gap \*/ * html div.float-right { /* margin-left: -3px; */ } /* END FIX */ /* Clears the space on each side of the element (especially for spacers after a floating element) */ .spacer { clear: both; margin: 0; padding: 0; }