Klassisches Menü/ div größe

Jockelx

Hallo,

ich hab recht klassisch folgendes:

<html>
  <body>
    <div style="border: 5px solid green; float: left; width: 60px; height: 60px">Logo
    </div> 
    <div style="border: 5px solid blue; margin-left: 70px;"> Title  
    </div>    
    <div style="border: 5px solid red; margin-left: 70px;"> 
      <table> 
        <tr> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> 
        </tr> 
      </table> 
    </div>
  </body>
</html>

Also links ein Bild; rechts daneben Titel; darunter ein Menü.
Mein Problem ist das Menü. Das rote div geht nur bis zum Bildschirmrand, während die Tabelle ggf. größer ist.
Mach ich z.B. ein 'display: inline-block;', dann wird zwar das div vergrössert, 'rutscht' aber nach unten.
An dem Html-Aufbau kann ich schlecht was ändern, daher wäre eine reine CSS-Lösung super.

Über Vorschläge würde ich mich freuen.

Shade Of Mine

Hat es einen bestimmten Grund dass du hier floatest? Denn eigentlich ist das ja keine float Situation wenn du den Umbruch nicht willst.

Ich würde spontan folgendes machen:

<html>
  <body>
    <div style="border: 5px solid green; position:absolute; width: 60px; height: 60px">Logo
    </div>
    <div style="border: 5px solid blue; margin-left: 70px;"> Title  
    </div>    
    <div style="border: 5px solid red; margin-left: 70px;display:inline-block;">
      <table>
        <tr> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td> <td> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ  </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Aber was genau willst du denn machen? uU reicht es ja auch dem roten div ein overflow:auto zu geben?

Jockelx

Shade Of Mine schrieb:

Hat es einen bestimmten Grund dass du hier floatest? Denn eigentlich ist das ja keine float Situation wenn du den Umbruch nicht willst.

Mmh, weiß ich auch nicht mehr, wofür das gut war.
Scheint jedenfalls nicht benötigt gewesen zu sein - sieht alles gut aus.

Vielen Dank, lg.