HTML & CSS
Von: Avaloki, 8.8.2009 13:43 Uhr
Hallo, ich möchte drei DIV-Boxen nebeneinander bauen.
Die erste DIV-Box hat dabei eine feste Breite von 170px, die anderen beiden Boxen sollen sich die restliche Breite zu 60% un 40% teilen. Wenn ich dies so über CSS bestimme, wird bei den beiden %-Boxen die gesamte Breite als Grundlage zur Berechnung genommen und die 170px von der ersten Box nicht berücksichtigt.
Weiß jemand wie man dies umsetzen kann? Ich dachte an etwas wie:
width: 40%-85px bzw. 60%-85px

Danke im Voraus
Matthias



  1. Antwort von Sebastian 0
    Re: DIV-Boxen mit unterschiedlicher Breite
    Hallo,

    ganz einfach:
    <html>

    <body>
    <style>

    #box1{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 170px;

    }
    #box2{
    position: absolute;
    top: 0px;
    left: 170px;
    right: 0px;

    }
    #box3{
    position: absolute;
    top: 0px;
    left: 0px;


    }
    #box4{
    position: absolute;
    top: 0px;
    left: 60%;


    }
    </style>

    <div id="box1">1.Box</div>
    <div id="box2">

    <div id="box3">2.Box-links</div>
    <div id="box4">2.Box-rechts</div>

    </div>
    </body>
    </html>

    MfG Sebastian
    4 Kommentare
    • von Avaloki 0
      Re^2: DIV-Boxen mit unterschiedlicher Breite
      Danke, hat funktioniert! Die Lösung ist zwar ziemlich einfach, aber versuche mal sowas im Internet zu finden! :-)
    • von Sebastian 0
      Re^3: DIV-Boxen mit unterschiedlicher Breite
      Hallo,

      das Internet ist voll von genialen CSS-Techniken. Falls Du gute Informationen über CSS brauchst, kann ich dir nur de.selfhtml.org empfehlen.

      Guck Dir auch mal folgende Seite an: http://de.selfhtml.org/css/layouts/me...

      MfG Sebastian
    • von Mohamed 0
      Funktioniert nicht im Internet Explorer
      Hallo Sebastian,

      Dein Beispiel funktioniert nicht im IE 6, und wahrscheinlich auch nicht im IE 7.

      Schöne Grüße,

      Mohamed.
    • von Sebastian 0
      Re: Funktioniert nicht im Internet Explorer
      Hallo Mohamed,

      das folgende Skript müsste auch unter IE6 und 7 laufen:
      
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      
      <head>
      <title>Meine Homepage</title>
      <style>
      
      
      #box1{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 170px;
      }
      
      #box2{
      position: absolute;
      top: 0px;
      left: 170px;
      right: 0px;
      }
      
      #box3{
      top: 0px;
      width: 40%;
      float: left;
      }
      #box4{
      left: 40%;
      }
      </style>
      
      </head>
      
      <body>
      
      
      <div id="box1">1.Box</div>
      <div id="box2">
      
      <div id="box3">2.Box-links</div>
      <div id="box4">2.Box-rechts</div>
      
      </div>
      </body>
      </html>
      


      MfG Sebastian