Peter Löffler: Zwei DIVs nebeneinander positionieren

Hallo,
ich will in meinem Header zwei DIVs nebeneinander platzieren. Empfiehlt es sich das mit einer absoluten Positionierung zu realisieren? Oder sollte man hier besser mit einer Tabelle arbeiten? Zum besseren Verständnis:

  
<body>  
<div id="header">  
<div id="left"><h4>Logo</h4></div>  
<div id="right"><div id="menu"></div></div>  
</div>  
...  
</body>  

#header {heigh:150px;float:left;border-bottom:0px;}  
#left {width:215px;position:absolute;top:27px;left:100px;height:150px;border:0px;}  
#right {width:765px;position:absolute;top:27px;left:315px;height:150px;border:0px;}
  1. Hi,

    ich will in meinem Header zwei DIVs nebeneinander platzieren. Empfiehlt es sich das mit einer absoluten Positionierung zu realisieren? Oder sollte man hier besser mit einer Tabelle arbeiten?

    keins von beiden - ich würde entweder die beiden div-Container floaten, oder als inline-block formatieren.

    So long,
     Martin

    PS: Warum der Themenbereich HTML? Es geht doch um Darstellung, also CSS.

    --
    Ungeschehene Ereignisse können einen katastrophalen Mangel an Folgen nach sich ziehen.
      (Unbekannter Politiker)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. keins von beiden - ich würde entweder die beiden div-Container floaten, oder als inline-block formatieren.

      lso CSS.

      Und wie verhindere ich, beim Einsatz von float die Verschiebung des rechten DIVs, sollte die Seite verkleinert werden?

      1. Hallo,

        keins von beiden - ich würde entweder die beiden div-Container floaten, oder als inline-block formatieren.
        Und wie verhindere ich, beim Einsatz von float die Verschiebung des rechten DIVs, sollte die Seite verkleinert werden?

        im Idealfall verhinderst du das gar nicht, sondern nimmst es als Vorteil hin, denn es erspart das horizontale Scrollen.

        Wenn du aber unbedingt erzwingen willst, dass die beiden Boxen nebeneinander stehen, und dafür auch einen horizontalen Scrollbalken in Kauf nimmst, dann gib dem Elternelement (in letzter Instanz eventuell das body-Element) eine Mindestbreite.
        Alternativ könntest du auch die Breite der beiden Boxen in Prozent bezogen auf deren Elternelement festlegen, so dass sie in Summe weniger als 100% ausmachen.

        Ciao,
         Martin

        --
        Dieser Satz wurde in mühsamer Kleinstarbeit aus einzelnen Wörtern zusammengesetzt.
          (Hopsel)
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. möglich wäre auch display:table-cell

  2. <body>
    <div id="header">
    <div id="left"><h4>Logo</h4></div>
    <div id="right"><div id="menu"></div></div>
    </div>
    ...
    </body>

      
    beide DIVs sind überflüssig! Sie enthalten jeweils Elemente, die du sehr wohl direkt formatieren könntest. Und bei 2 Elementen nebeneinander fällt mir zuerst float ein, nicht table oder position.
    
  3. @@Peter Löffler:

    nuqneH

    <div id="left"><h4>Logo</h4></div>
    <div id="right"><div id="menu"></div></div>

    "left" und "right" sind keine sinnvollen Bezeichner für IDs (oder Klassen).

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)