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
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License