Fixed height headers

This article is a simple "how to" about developing headers with fixed height. You'll agree that most of them fall into this category.

Introduction

This is basically the description of my process when dealing with headers. It allows you to not only to be precise in positioning header elements, but also to manipulate with markup in a way that you prefer, or in a way that web standards imply.

The markup

Most common elements in header are logo, slogan and main navigation. We also might add a search box. You can put any element you need. The principle is always the same.
Let’s presume that we already have centered container div with fixed width. We’ll create a header div and put all of our elements inside. As mentioned, we have logo, slogan, main navigation and search form. We’ll use headings for logo and slogan, unordered list for navigation and form element.

Styling

Main idea of this approach to creating headers is absolute positioning of header elements. Once you have header div placed and you know its width and height you can treat it as coordinate system. Every element inside the header will have top and left values that will place him on exact location within that system. If your elements are overlapping you can add z component (z-index) and have 3D coordinate system.
Important thing is that when describing header div you must add position: relative so the elements inside it can refer to it.
Note: I will not go into detailed styling of each element. The purpose of this article is to show you the principles so you can use this idea with your css.