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

my questions top horizontal bar encapsulating logo , menu. not want specify height because prefer browser automatically adjust depending on user configuration (text size, disablement of css or image).

i have found solution using position: absolute;: http://jsfiddle.net/5gmwp/30
solution avoids white gap around black top bar.

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

but top horizontal bar displayed on foreground, , rest of page partially on background. fix have used reset.css normalize css: http://jsfiddle.net/ukyrr/12

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

but have specify height keep logo image inside black top box.

what practices code such horizontal top bar?
appreciate , tiny css tutorials ;)

edit: before used use <table> fix kind of issues. noticed of website use <div> , css instead. question: why of web site prefer use <div> instead of <table> display horizontal bar? in order simplify copy-paste website?

more details: developing in spare time website allow create maps accessible visually impaired people. therefore want website displayed in possible configurations: css disabled, images disabled, big text size, old browser... in mean time, site should eye-candy on recent browsers. , css/html/javascript/images files should small. , maybe no dependency on external css/javascript files. add menu within top horizontal bar. re-writing map editor webapp (svg+javascript) story...

http://jsfiddle.net/ukyrr/16/

that's easy (and can solved in such big variety of ways) don't know explain. please ask me want.

as div vs table war, there special terms table-based or inline-block-based layouts. there not worst or best 1 here. different basement paradigms of doing work. stick inline-blocks more half-a-year , have never seen totally exciting in table-world inline-blocks or float or blocks (with js) can't do. that's totally enough me prefer inline-blocks.