CSS Models

CSS layout sample : Dozens of models to help you create without tables
CSS menus galleries : All sort of menus for inspiration (simples, graphics, expanding,...)

Most visited

Use and position of CSS elements

Prerequisite: knowledge of CSS style sheets, knowledge of HTML tags.

Tables used for page setting have always been a bad idea. However, using correctly layers (div tags) will soon become a must.
Visual HTML editors use only a small part of layers possibilities, which often makes them not compatible and not easy to use.
Here is how to position CSS elements for best results.

Block and inline tags.

This chapter on tags structure is essential, please see first tutorial on block and in-line tags.

Ancestors, Parents, Children, Siblings

Understanding how the elements (boxes) interact together is essential.

Each HTML document is always made out of containers. These can be ancestors, parents, children or siblings. These different elements create an imbricated hierarchy.

An Ancestor is an element that contains another element or a hierarchy of other elements.
A Parent block is an element directly containing another block, for example a DIV containing a P paragraph.
Careful: if the paragraph contains other elements (for example strong), DIV will not be parent for strong but only its ancestor, the parent being only the immediate ancestor.
A block contained directly in another block is its child. For example, here LI elements are children of their container UL.
Elements having the same parent element are siblings.

Flow

Placing the different elements on the page is by default according to the current flow.

The elements (tags) are placed one after the other within the HTML code for the page.

The order in which tags appear in HTML code will be the order in which they will appear in the document, this is the flow. It means that by default each element is dependant on the siblings around it.

By default, block and in-line tags have a different behavior in the normal flow (see tutorial about tags structure).

NOTE: blocks that are placed in "absolute" or "fixed" are apart from the natural flow and are somewhat not submitted to its rules.
They are not dependant of their siblings.
These blocks don't refer to their direct parent for placement, but to the first positionned ancestor they encounter. See further explanations.

Elements positionning

Positionning within the normal flow

It is the positionning by default, that is according to the external margins of the document. The flow governs the agencing of all the diverse siblings elements.

Without an explicit definition of positionning, a block will go to the top left corner of its container (container being another block , a cell in a table, the body,...) and automatically takes the whole width of the container.
Its siblings will then place themselves below that first element.

From that point, it is easy to position a block within its parent thanks to the margin properties.

For example, to place a 100x100px at 15px from the left and 200px from the top of the container:

.bloc {
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-left: 15px;
  margin-top: 200px;
  }

Note: You don't have to use pixels to place your blocks, any unit is valid. (%, em, auto,...)

Floating position

The FLOAT property allows you to place a block to the left or to the right within a parent, and not one below the other as in by default. The rest of the parent container will then occupy the remaining free space.

In fact, a float element is first placed into the flow, then "pushed" left or right.

As the FLOAT is outside of the current flow, it is not taken in consideration in the calculation of the container's height if it is not specified. There may be an issue of the element going over the space of the container.

The usual usage is that you align one image to the left or right of the text.

HTML :
<div class="conteneur">
   <img class="gauche" alt="..." src="..." />
   texte bla bla bla
   ....
</div>

CSS :
.gauche {
  float: left;
  }

NOTE: When there are floating elements, it is often recommanded to place them within a shared parent.

It is possible to add the FLOAT properties to have several blocks side by side.

Use of absolute, fixed and relative positions.

This property is widely used by default on WYSIWYG softwares such as Dreamweaver. This is because of this abusive use of "layers" that the latter got a bad reputation.

Absolute, fixed or relative positions have disavantages because they are too rigid. They allow very little adaptation of websites to different resolutions in most cases.

However, this rigidity is only ficticious and is due to the fix values that are generally given by softwares such as Dreamweaver. You may very well use an absolute position with percentages or em. You may also center a website with absolute positions. You only need to understand how it works and not leave everything to Dreamweaver.

Also, this is the only way to have two blocks one above the other (with the z-index property).

When in an absolute, relative or fixed position, a block is called "positionned".
It is outside the HTML code flow. Its position will be the same no matter the place of the tag within the code of the parent container, no matter the element's relationships with other elements.
A block is placed according to its parent if it is positioned or according to the last positioned ancestor. If no ancestor is positioned, the element will refer to the entire page (HTML body tag or html in XHTML).

When in absolute position, a block is generally placed with the "top" and "left" based on the upper left corner of the parent.
If there are no top and left values, the block will appear in the spot where it is declared, which can be useful to correctly place stacked elements within the page.

Please note that relative position is an exception within the group: it is a form of placing that leaves the element within the normal flow, so it is still dependant and influenced by its siblings, but it still moves it with the "top" and "left" properties, such placed element can have "positionned" element's properties, that is it can be parent for elements that are outside of the normal flow in absolute position for example.

A few examples:

Two blocks, one on top of the other with a separation space:

HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>

CSS :
.bloc1 {
background-color: blue;
height: 50px;
}
.bloc2 {
background-color: green;
height: 50px;
margin-top: 20px;
}

Three blocks side by side with a separation space:

HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
<div class="bloc3">blu blu blu</div>

CSS :
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}

A block within another block:

HTML :
<div class="conteneur">
   <div class="bloc">bli bli bli</div>
</div>

CSS :
.conteneur {
background-color: blue;
height: 100px;
width: 100px;
}
.bloc {
background-color: yellow;
height: 50px;
width: 50px;
margin-left: 20px;
margin-top: 40px;
}

An image aligned to the right of a text:

HTML :
<div class="conteneur">
 <img class="image" src="..." alt="" />
  <p>bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla ...</p>
</div>

CSS :
.conteneur {
width: 40%;
background-color: yellow;
}
.image {
float: right;
}

Use your tags wisely!

It is often not necessary to have multiple imbrications for <div> since they only delinit zones within the page.
Don't use <table> tags to design layout, that's not what they're for but use them to enter data within a table for statistics for example.
Use <h1> ... <h6> tags for your titles instead of using <p> tabs.
Use <ul> <li> lists for your menus, since that's what they're also for (see tutorial about that).

Print article

Raphael GOETTER
www.alsacreations.com