Header Reset

This is a test page to see what CSS is required to "reset" the #header div to reposition the elements within the header in natural HTML order (top to bottom, left to right.

This code is close, but for some reason I haven't found yet, the #top-bar div collapses if a minimum height is not declared. Here is the section of CSS controlling the top-bar:

#top-bar {
  margin: 0;
  padding: 0;
  position: static;
  top: inherit;
  right: inherit;
  bottom: inherit;
  left: inherit;
  min-height: 24px; /* need this or the div collapses */
}

This page should make it easier to play with using Firebug or Web Developer.

The header contains these main elements in this HTML order:

• #header
  • #search-top-box
  • #top-bar
  • #login-status
  • #header-extra-div-1
  • #header-extra-div-2
  • #header-extra-div-3