HTML Tutorials - <div> tag

being revised May 2006
Google site search

ContentsIntroductionBasicIntermediateAdvancedFuturePolicyInfrastructure

div style='position: fixed'

This text is in a fixed position div box which should not scroll with the screen. However as you can see this does not work with IE or Netscape.

http://www.cerebuswebmaster.com/onsite/javascripts/fixed_on_top.html provides a javascript emulation of position: fixed;

http://devnull.tagsoup.com/fixed/ provides a CSS fiddle to emulate position: fixed; by having the scrollbar enabled only within a particular div block which is used to contain the general content of the page.

1   Using <div>

CSS provides for a number of positioning schemes. <div> is generally a block structure element. Block structure means that one block follows the next vertically down the page, with whatever space insertion is defined for that type of block. You can change <div> to be an inline element by using the CSS style='display: inline'. Inline elements are arranged across the line and can be adjusted for alignment using a variety of options.

div style='position: relative;'

Cell 1 using float left
Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

 
Cell 1 using float left
Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

 
Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

Simple div

Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

div style='display: inline'

Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

div style='display: table-cell'

Cell 1 using float left
Cell 1 using float left
Cell 2 using float left
Cell 2 using float left
Cell 3 using float left
Cell 3

using float left

©2000 - 2006 WEBSCOOL This page last updated 18 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.