join: new@juude

get alerts for new articles


join: new@juude

get alerts for new articles

css: casscading style sheets

CSS Box Model & Visibility W3C

All html elements are considered to be separate boxes (either block or inline). You can position, float and style each of the elements.

Properties and Values

  • position
    value: static | relative | absolute | fixed (static is the default)

  • display
    value: block | inline

  • float
    value: left | right

  • clear
    value: left | right | both

  • width
  • max- width
  • min-width
  • height
    height and width values:length (px or em) | percentage | auto

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin
    margin values:length (px or em) | percentage | auto

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding
    paddingvalues:length (px or em) | percentage | auto

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-width
    border-width values: thin | medium | thick |length (px or em)

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-color
    color values: color property

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-style
    border-style values: none | dotted | dashed | solid | double | groove | ridge | inset | outset

  • overflow
    value: visible | hidden | scroll | auto
go to top of page


Positions allow you to position elements and also stack them using the z-index. Elements are positioned using the top, bottom, left, and right properties
  • Static: the default the element stays within the flow

  • Relative: position is within the flow and is relative to its inital position.

  • Absolute: completely out of the flow of the rest of the information. It is relative to its parent when the parent has a position other than static.

  • Fixed: completely out of the flow of the rest of the information.It is positioned relative to the browser's window and will be visable even when the user scrolls.


The z-index allows you to stack elements on top of each other. The lowest element has the lowest number. Negative numbers can be used. In order to use the z-index the element must have a position. The other elements that are within the stacking order must also have a position. In the example below A is the lower element in the stack.

A{ position: relative; z-index: 1;

B{ position: relative; z-index: 2;


In order to have elements placed next to each other without using properties you need to use a float. Elements that are floated, automatically become a block unless otherwise stated in the display property. Elements can only be floated left or right, not up or down.

The floated element needs to be placed in the code before the element that you want it to float next to. For example when floating an image within text the image needs to go first


All elements after the floated element will flow around the floated element if there is enough space. This could include elements that you do not want to flow around the floated element. If you want to avoid this you need to use the clear property.

go to top of page