Resizing and moving block-level elements

The width and height of a block-level element can be specified with the width and height attributes. The syntax of these attributes is:

width: value
height: value

where value specifies the width of the element in absolute units of percentages. The actual width of the element is what is left after you subtract the margin, border, and padding for the element.

Warning: the results might be unpredictable with some browsers.

For positioning of block-level elements one can use the following attributes:

position: absolute (or relative)
left: value
top: value
right: value
bottom: value

where the values specify the position of the block-level element. The values can be in absolute units.

Example:
The two nested boxes are produces by the following code:

<div style="position : relative;
         left : 150px;
         top : 10px;
         width : 400px;
         background-color : orange">
<h2>This is a relatively positioned box</h2>
  <div style="position : absolute;
         left : 170px;
         top : 76px;
         width : 100px;
         background-color : green">
  This is an absolutely positioned box
  </div>
</div>

This is a relatively positioned box

This is an absolutely positioned box

How do you like this:

This is an example of a waving text.