Top bar encapsulating logo and menu and using an automatically adjusted height

My questions is about the top horizontal bar encapsulating logo and menu. I do not want to specify its height because I prefer the browser automatically adjust it depending on user configuration (text size, disablement of CSS or image).

I have found a solution using position: absolute;: http://jsfiddle.net/5GmWp/30
This solution also avoids the white gap around the black top bar.

#top{ color: white;
      background: none repeat scroll 0 0 #444;
      /* "absolute position" avoids a white gap around the #top black bar */
      position: absolute;
      /* Using absolute position, I do not have to specify the height */
      height: auto;
      width: 100%;
      top: 0;
      left: 0;
      padding-left: 3em; }

But this top horizontal bar is displayed on foreground, and the rest of the page is partially on its background. To fix that I have used reset.css to normalize the CSS: http://jsfiddle.net/UKYrR/12

#top{ color: white;
      background: none repeat scroll 0 0 #444;
      /* reset.css removes the white gap around the #top box */
      /* position: absolute; // "absolute position" is not required */
      /* However I have to specify the height :( */
      height: 90px;
      /* If height=auto, the logo is partially outside the #top box */
      width: 100%;
      top: 0;
      left: 0;
      padding: 0.5em;
      padding-left: 3em; }

But now I have to specify the height to keep the logo image inside the black top box.

What are the good practices to code a such horizontal top bar?
I would also appreciate good and tiny CSS tutorials ;)

EDIT: Before I used to use <table> to fix this kind of issues. But I noticed most of the website use <div> and CSS instead. Another question: Why most of the web site prefer to use <div> instead of <table> to display horizontal bar? Is it in order to simplify the copy-paste from the website?

More details: I am developing in my spare time a website to allow anybody create maps accessible to visually impaired people. Therefore I want the website to be well displayed in all possible configurations: CSS disabled, images disabled, big text size, old browser... But in the mean time, the site should also be eye-candy on recent browsers. And the CSS/HTML/JavaScript/images files should be small. And maybe no dependency on external CSS/JavaScript files. I will add the menu soon within the top horizontal bar. I am also re-writing the map editor webapp (SVG+JavaScript) but this is another story...

Solution

http://jsfiddle.net/UKYrR/16/

That's so easy (and can be solved in such a big variety of ways) that I don't know what to explain. Please ask me about everything you want.

As for the div vs table war, there are even special terms like table-based or inline-block-based layouts. There is not the worst or best one here. They are just different basement paradigms of doing your work. I stick to inline-blocks for more than half-a-year and have never seen something totally exciting in table-world that inline-blocks or float or even blocks (with JS) can't do. That's totally enough for me to prefer inline-blocks.