3 divy za sebou

paia

Ad1:
Pokud převedeš blokový prvek na řádkový, tak už mu nemůžeš nastavit rozměry.

Ad2 - float:
Pokud použiješ float, tak už blok nepevných rozměrů (s widh:auto;) nevystředíš.

Ad2 - protažení:
FF používá při počítání výšky a šířky bloků tzv. obsahový model. To znamená, že výškou a šířkou bloku se rozumí jen obsah bez paddingu a borderu. Naproti tomu u starších IE (a novějších ve zpětně kompatibilním módu) se hodnotou výšky a šířky rozumí šířka včetně paddingu a marginu - tzv. okrajový model. Buď vynuluj #menu_text {padding-top: 2px;} (a změň třeba výšku řádku) nebo přepni výpočet šířky na okrajový pomocí #menu_text {-moz-box-sizing: border-box; box-sizing: border-box;}. Další možností je řešení pomocí dvou vnořených prvků (vnější má rozměry, vnitřní padding a border).


Přemýšlíš moc tabulkově. Problém bych řešil jinak. Vložit vše do tří DIVů. Vnější by měl rozměry a byl by zarovnán na střed. Jeho pozadím by byl vodorovně se opakující proužek. Prostřední by měl definován obrázek na pozadí levý konec (neopakovat, vlevo) a vnitřní by měl pravý konec (neopakovat, vpravo). Vnitřnímu je ještě nutno nastavit levý a pravý padding o šířce těch obrázků. Pokud by proužkem byla jen barva, potom je možno ji a levý roh definovat vnějšímu DIVu a prostřední vynechat.