Positioning divs — or rather: elements — in CSS is not as hard as it seems, if you know your tools. There are a number of positioning tools, quite a few more than just the position declaration, which will all be covered here. If you understand matters described in this article, or if you first want to learn how to center in CSS, go on to How to Center in CSS. There also is an article on how to get 100% height, or how to create a sticky footer as it is usually called, which you can find here: Create a Fixed ('Sticky') Footer With CSS.
But for all articles counts that first you have to know the meaning of a few terms, which are explained below. I assume that you have a basic understanding of HTML and CSS. If not, you might want to do the beginners courses of W3 Schools first.
The positioning tools are the following:
With float we can line up sibling block-level elements horizontally, and we can position elements on the right-hand side. Float has three possible values: left, right and none. Float:right has the effect of the element saying: "Next sibling element, come to the left of me while I position myself as far right and as high as possible within our parent element; if there is not enough space on the left-hand side, get under me." For this effect to be rendered cross-browser reliably, that next element also has to have a float declaration.
Float:none should not be used because under several circumstances there are significant rendering differences between IE6/7 and other major browsers. What should always be used is the float-related property named clear, with the values left, right and both. That neutralizes the float influence.
To avoid unwanted behavior of later elements and to avoid browser rendering differences, a float declaration should always be maintained (repeated for every next sibling element) until cleared. There should never be an open end to a float, not even if the floated elements are all nested.
If necessary, use an empty div or other element with a clear declaration to neutralize it, either directly after the floated elements, or directly after the closing tag of the parent element. The floated elements and the clearing element do not have to be of the same hierarchical order. Some people advocate to clear a float by using a side effect of overflow:auto, but that makes the code less intuitive and deprives you of the ability to regulate the overflow.
An element under the influence of a float declaration no longer stretches out over the full available width, if that is what it normally does, but wants to stay as small as possible. It is said that it gets a shrink-wrap. To counteract that, a width declaration is necessary.
With display:inline we can also line up sibling block-level elements horizontally. However, other than in the case of float, these elements do not just get a shrink-wrap, but also become totally irresponsive to width declarations. They can only get wider if the contents grow or if padding is added. Also, they become sensitive to spaces in the code, which makes code formatting difficult. The latter also counts for display:inline-block. All in all, you should only use this positioning method under special circumstances.
With position we can get several effects, depending on whether the element has a position:absolute, relative, fixed or a nested position. If an element has a position:static, which is the default value, it is not responsive to LRTB declarations.
An element with a margin-left:100px will be moved to the right 100 pixels (unless it also has a margin-right of 100 pixels). A margin-left:-100px will move the element to the left 100 pixels, even if it means that it will go off the canvas. The same counts for a negative margin-top. The next sibling element will follow the shifting. (Compare with a position:relative with a LRTB declaration, which shifting is not followed.)
In many (combinations of) elements, we can move the contents by adding padding. For example, in
<h4 style="padding-left:100px;">Hello world</h4>
the text is moved to the right with 100 pixels. Do make sure that the containing element offers enough space, or the contents will extend beyond it. Negative padding values are not rendered.
With text-align, which can have the values left, center and right, we can do two things. The first is position text within text block elements such as <p>, <h1> through <h6> and <li>. It is important to note that it is not the text block element itself that is positioned, but the text within. Because the text-align property is inherited, you can declare it for the text block element or for its parent block element.
The second thing we can do with it is position inline elements within block elements, such as an image in a div. For that, you need to declare it for the parent element.
As the term suggests, with background-position we can position the background image of an element, which can come in handy if you want to position an image. The syntax is as follows: background-position: [horizontal value] [vertical value]. The values can be left, center, right (horizontal) and top, center, bottom (vertical). For both values relative and absolute measures (percentages, ems, pixels, etc.) can be used as well.