ridda: Drei Divs nebeneinander

moin,

ich möchte gern drei divs nebeneinander platzieren.
und zwar folgend:
div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100px">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="100px">&nbsp;</td>
  </tr>
</table>

ich hab schon einiges ausprobiert aber ich komm leider nicht drauf :(

über diesen gibts steht noch ein banner und der body hat ein padding

body {
    background-color: #CCCCCC;
    padding: 3px 5% 1em 5%;
 height:100%;
 }

der cont_rechts muss bündig mit dem rechten rand des banner sein

#banner{
  width:100%;
  ...
  }

  1. Hi,

    ich hab schon einiges ausprobiert aber ich komm leider nicht drauf :(

    schau' Dir einfach mal das Beispiel http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm an und lies Dir ggfls. auch das Kapitel durch.

    freundliche Grüße
    Ingo

    1. Kann bitte jemand ein fertiges HTML Beispiel geben, ohne ein CSS zu verwenden. (was dann im DIV stehen muss). Mir scheint das sollte didaktisch gehen. Mich wäre das nützlich.
      <DIV....> </DIV>
      <DIV....> </DIV>
      <DIV....> </DIV>

      1. Hier drei Vorschläge, der erste ist am besten.
        PS und ohne CSS dargestellt, es geht inline. PPS Im NotePad hat's je auf 1 Zeile Platz, sieht ordentlicher aus.

        <div style="position:relative">
          <div style="position:absolute; left:0; width:100; background-color:red;"  >rechter Text</div>
          <div style="position:absolute; right:0;width:100; background-color:green;">linker Text </div>
          <div style="position:absolute; left:100; right:100; background.color:silver">mittlerer Text</div>
        </div>

        <br><br><br>

        <div style="position:relative">
          <div style="float:left; width:100; background-color:red;"  >rechter Text</div>
          <div style="float:right;width:100; background-color:green;">linker Text </div>
          <div style="position:absolute; left:100; right:100; background.color:silver">mittlerer Text</div>
        </div>

        <br><br><br>

        <div style="position:relative">
          <div style="float:left; width:100; background-color:red;"  >rechter Text</div>
          <div style="float:right;width:100; background-color:green;">linker Text </div>
          <span style="background.color:silver">mittlerer Text</span>
        </div>

        1. Dann stelle ich noch überrascht einen Druckfehler fest: background.color anstatt background-color. Dem Internet Explorer macht das aber nichts aus - es ist dasselbe!

        2. Hi,

          Hier drei Vorschläge, der erste ist am besten.

          Nö - die sind alle Murks.

          PS und ohne CSS dargestellt, es geht inline.

          was willst Du damit sagen?

          <div style="position:relative">

          _Ich_ weiß zwar, wozu dies dient, aber ohne Erklärung sollte das nicht gepostet werden.

          <div style="position:absolute; left:0; width:100;

          Dir ist klar, daß absolute Positionierung hierzu überflüssig ist und bei standardkonformer Interpretation diese fehlerhaften Angaben ignoriert werden?

          <div style="position:absolute; left:100; right:100;

          Auch hier wieder ungültige Werte. Und der einzige Browser, der diese vielleicht schlucken würde, kann das nicht umsetzen.

          <div style="position:relative">
            <div style="float:left; width:100; background-color:red;"  >rechter Text</div>
            <div style="float:right;width:100; background-color:green;">linker Text </div>
            <span style="background.color:silver">mittlerer Text</span>
          </div>

          Hier ist die position-Angabe überflüssig und das inline-Element völlig deplatziert.

          freundliche Grüße
          Ingo

          1. Ingo, hast Du das ausprobiert,  besonders mit den verschachtelten position:relative und position:absolute?

            PS und ohne CSS dargestellt, es geht inline.
            was willst Du damit sagen?

            dass man, um es zu diskutieren, die style-Elemente auch direkt in die tags schreiben kann.

            Gruss, Peter

          2. Nö - die sind alle Murks.

            Und wieso?

            Positionierungseigenschaften zuverwenden hat definitiv den Vorteil das die Rheinfolge der div's im Quelltext egal ist, und sich somit nach der logischen Rheinfolge richten kann. Das ist bei Float nur bedingt möglich.

            1. Hi,

              Nö - die sind alle Murks.

              Und wieso?

              weil sie allesamt fehlerhaft und - standardkonform - zu ignorieren waren.

              Positionierungseigenschaften zuverwenden hat definitiv den Vorteil das die Rheinfolge der div's im Quelltext egal ist, und sich somit nach der logischen Rheinfolge richten kann. Das ist bei Float nur bedingt möglich.

              Nur daß diverse Nachteile damit inkauf genommen werden müssen. Und wer sich nicht mit CSS auskennt, sollte mMn die Finger von absoluter Positionierung lassen. Nicht zuletzt auch deshalb bezeichnete ich den Code-Vorschlag als Murks.

              freundliche Grüße
              Ingo

              1. Hi,

                Nö - die sind alle Murks.

                Und wieso?
                weil sie allesamt fehlerhaft und - standardkonform - zu ignorieren waren.

                Positionierungseigenschaften zuverwenden hat definitiv den Vorteil das die Rheinfolge der div's im Quelltext egal ist, und sich somit nach der logischen Rheinfolge richten kann. Das ist bei Float nur bedingt möglich.

                Nur daß diverse Nachteile damit inkauf genommen werden müssen. Und wer sich nicht mit CSS auskennt, sollte mMn die Finger von absoluter Positionierung lassen. Nicht zuletzt auch deshalb bezeichnete ich den Code-Vorschlag als Murks.

                freundliche Grüße
                Ingo

                Ich erlaube mir die Bemerkung, dass meine drei absoluten DIVS (bzw. die beiden anderen Varianten) in einem relativen DIV verpackt waren, und somit sich mit "absoluten" Massen auf die Grenzen des relativen DIVS bezogen. Nicht etwa aufs Fenster oder den Bildschirm.
                Warum das nicht gut, oder fehlerhaft, oder nicht standardkonform sei, bitte erkläre es mir. Ich bin neu im JS/CSS, aber nicht neu im bithandling. Genau dieser Effekt von position:absolute; ist im SELFHTML in deutscher Sprache beschrieben. Wenn das nicht funktionieren sollte?

                Und was ist der Standard für - sich im CSS nicht auskennen, oder auskennen?

                1. Hi,

                  Ich erlaube mir die Bemerkung, dass meine drei absoluten DIVS (bzw. die beiden anderen Varianten) in einem relativen DIV verpackt waren, und somit sich mit "absoluten" Massen auf die Grenzen des relativen DIVS bezogen. Nicht etwa aufs Fenster oder den Bildschirm.

                  schon klar, weshalb ich auch anmerkte:

                  <div style="position:relative">
                  _Ich_ weiß zwar, wozu dies dient, aber ohne Erklärung sollte das nicht gepostet werden.

                  Warum das nicht gut, oder fehlerhaft, oder nicht standardkonform sei, bitte erkläre es mir.

                  Fehlerhaft, weil z.B. "100" kein korrekter Wert für die Eigenschaft ist - die Einheit fehlt. Daß der IE hier "px" rät und nicht "cm", ändert an der Fehlerhaftigkeit nichts; fehlerhafte CSS-Angaben sind standardkonform zu ignorieren.

                  Ich bin neu im JS/CSS, aber nicht neu im bithandling. Genau dieser Effekt von position:absolute; ist im SELFHTML in deutscher Sprache beschrieben. Wenn das nicht funktionieren sollte?

                  Aber mit korrekten Werten. Allerdings: warum hast Du ausgerechnet position:absolute hier herausgesucht? SELFHTML beschreibt auch viele andere Eigenschaften und was die Nutzung der Eigenschaften betrifft, emfehle ich Dir das Kapitel CSS-basierte Layouts. Dort findest Du nur äußerst selten und nur dort, wo es wirklich gebraucht wird position:absolute.

                  freundliche Grüße
                  Ingo

                  1. Warum das nicht gut, oder fehlerhaft, oder nicht standardkonform sei, bitte erkläre es mir.
                    Fehlerhaft, weil z.B. "100" kein korrekter Wert für die Eigenschaft ist - die Einheit fehlt. Daß der IE hier "px" rät und nicht "cm", ändert an der Fehlerhaftigkeit nichts; fehlerhafte CSS-Angaben sind standardkonform zu ignorieren.

                    Interessant. (1) könnte im SelfHTML, nächste Version stehen, dass die Masseinheit obligatorisch sei. (2) Der Frontpage macht bei einer Tabelle von 100 pixel nur width="100". Ohne px. Ich hab's rasch nachgeschaut. Die andere (3) Frage ist noch, ob die Anführungszeichen ".." nötig sind. Der Frontpage schlägt sie im Tag-Editor nie vor.

                    Gruss, Peter

                    1. Hi,

                      Interessant. (1) könnte im SelfHTML, nächste Version stehen, dass die Masseinheit obligatorisch sei.

                      Warum? An keiner Stelle ist eine CSS-Angabe ohne die erforderliche Einheit (0 bzw. den Sonderfall bei line-height ausgenommen)- wenn Du eine findest, melde dies bitte im Bugtracker. Es sollte doch wohl selbstverständlich sein, daß die Einheit anzugeben ist - ansonsten müßte der Bowser die Angabe ignorieren oder wie der IE raten, welche Einheit gemeint ist.

                      (2) Der Frontpage macht bei einer Tabelle von 100 pixel nur width="100". Ohne px.

                      In HTML ist das auch korrekt (hier gibt es nur px und %) - obwohl Frontpage ein Synomym für fehlerhaften Code ist. ;-)

                      Die andere (3) Frage ist noch, ob die Anführungszeichen ".." nötig sind. Der Frontpage schlägt sie im Tag-Editor nie vor.

                      Wie gesagt... Vergiß Frontpage, wenn es um standardkonformen Code geht (der auch ohne die Fehlerkorrektur des IE funktionieren soll). Attribute sind natürlich in Anführungsstriche zu setzen, auch wenn Microsoft-Produkte diese gern entfernen.

                      freundliche Grüße
                      Ingo

                      1. Hi,

                        Interessant. (1) könnte im SelfHTML, nächste Version stehen, dass die Masseinheit obligatorisch sei.
                        Warum? An keiner Stelle ist eine CSS-Angabe ohne die erforderliche Einheit (0 bzw. den Sonderfall bei line-height ausgenommen)

                        Damit's ein Einsteiger sieht, etwas Redundanz und Hinweise auf schon gemachte Fehler didaktisch nützlich ist beim self-lernen. Weils zudem in html ohne die Masseinheit geht. Weils keinen CSS-Checker gibt, der das ankreidet.

                        Warum? An keiner Stelle ist eine CSS-Angabe ohne die erforderliche Einheit (0 bzw. den Sonderfall bei line-height ausgenommen)

                        Dann kommt es irgendwann auch nicht mehr auf die gestalterische und inhaltliche Aufarbeitung an. Und kannst Du es, wie ein russisches Lehrbuch, im Fliessatz schreiben. Steht alles irgendwo. Schliesslich.

                        SELFHTML enthält sowohl einführende Kapitel für Anfänger als auch reine Nachschlagekapitel für Profis. Die Dokumentation ist eine Mischung aus Tutorial und Referenz.

                        1. Hi,

                          Weils zudem in html ohne die Masseinheit geht.

                          Da geht es _nur_ ohne Maßeinheit (=px) oder mit "%".

                          Weils keinen CSS-Checker gibt, der das ankreidet.

                          Aber sicher doch moniert der CSS-Validator ungültige Werte.

                          freundliche Grüße
                          Ingo

                      2. Hi,

                        Interessant.

                        Hi Ingo, darf ich noch folgendes fragen (da Du experte bist).
                        Ich versuchte (1) <div margin-left=1cm> und es ging. es steht aber nicht in der htmlreferenz. Deswegen änderte ich auf (2) <div style="margin-left:1cm;">

                        Ist (1) erlaubt oder nicht?
                        Danke und Gruss, Peter

                        1. Hi,

                          Ich versuchte (1) <div margin-left=1cm> und es ging.

                          in welchem Browser?
                          In HTML gibt es kein Attribut "margin-left" und keinen Attributwert "1cm" - und wenn es das gäbe,  müßte der Wert in Anführungsstriche.

                          Deswegen änderte ich auf (2) <div style="margin-left:1cm;">

                          Das ist syntaktisch richtig, aber für die Bildschirmdarstellung wenig sinnvoll (und inline-Styles sollten ohnehin vermieden werden).

                          freundliche Grüße
                          Ingo

                        2. Hallo,

                          Ich versuchte (1) <div margin-left=1cm> und es ging.

                          Das ist ziemlich unmöglich. Ich möchte sogar dabei soweit gehen, dass du etwas übersehen hast und dachtest es würde gehen.

                          es steht aber nicht in der htmlreferenz.

                          Weil es ein "margin-left"-Attribut für HTML-Elemente nicht gibt.

                          Deswegen änderte ich auf (2) <div style="margin-left:1cm;">
                          Ist (1) erlaubt oder nicht?

                          Das ist erlaubt und korrekt, auch wenn "cm" als Einheit für Webseiten denkbar ungeeignet ist.

                          Grüße
                          Thomas

              2. Die Nachteile sind mir durch aus bewusst. Auch das die Codebeispiel nicht zur direkten Nacharmung zuempfehlen sind ist mir klar. (-> Standardkonformietet!)

                Als alternative Vorschlag (zu Float) haben Sie aber IMO trotztdem Wert.

                freundliche Grüße
                Psycho

  2. Hallo ridda,

    div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

    HTML
    ***************

      
    <div id="header"></div>  
    <div id="links"></div>  
    <div id="rechts"></div>  
    <div id="inhalt"></div>  
    
    

    CSS
    ***************

      
    body {  
      background-color: #CCCCCC;  
      padding: 3px 5% 1em 5%;  
      height:100%;  
    }  
    #header ...  
    #links {  
      width:100px;  
      float:left;  
    }  
    #rechts {  
      width:100px;  
      float:right;  
    }  
    
    

    Wichtig ist, dass die gefloateten Elemente vor dem Inhalt im Quelltext erscheinen.

    Mit freundlichen Grüßen,
    André

    1. ersteinmal danke für eure hilfe

      @ ashura ich habe die id so gewählt, damit es hier im forum eventuell verstädnlicher wird und wenn ich es so mache wie du es vorgeschlagen hast bekommt der container in der mitte
      #content_container ;)
      nicht die volle breite zugeordnet, die verfügbar wäre, sonder nur einen teil

      das gleiche gilt für den beitrag von zeromancer, da er fast das gleiche vorgeschlagen hat :)

      ich werde mir nochmal die seiten anschauen, die als link angegeben worden sind,
      bin aber natürlich froh über jedes weitere posting, zu dem thema :)

  3. Hallo ridda.

    div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

    Sofern „div_links“ „div_rechts“ für IDs oder Klassen stehen, solltest du dir aussagekräftigere Namen überlegen, die etwas über ihren Inhalt aussagen.
    Wer sagt, dass die beiden Elemente immer jeweils links und rechts angeordnet werden und du das Layout niemals veränderst?

    Zu deinem Problem (heute mal in ASCII-Art):

    +---+----------+---+
      |   |          |   |
      |   |          |   |
      | 1 |     2    | 3 |
      |   |          |   |
      |   |          |   |
      +---+----------+---+

    Links http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floaten lässt du die Bereiche 1 und 2.
    Rechts floaten lässt du Bereich 3.

    Einen schönen Montag noch.

    Gruß, Ashura

    --
    Last Tears Keep Calling
    See Angels Falling
    Black Shadows In Your Head
    And One Eye For The Dead
    1. Hi,

      div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

      +---+----------+---+
        |   |          |   |
        |   |          |   |
        | 1 |     2    | 3 |
        |   |          |   |
        |   |          |   |
        +---+----------+---+

      Links http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floaten lässt du die Bereiche 1 und 2.

      Nein. Überlege Dir bitte, welche Beite ein gefloatetes Element hat und welche Breiten gewünscht sind.

      freundliche Grüße
      Ingo

      1. Hallo Ingo.

        Nein. Überlege Dir bitte, welche Beite ein gefloatetes Element hat und welche Breiten gewünscht sind.

        Und?

        Einen schönen Montag noch.

        Gruß, Ashura

        --
        Last Tears Keep Calling
        See Angels Falling
        Black Shadows In Your Head
        And One Eye For The Dead
        1. Hallo Ashura,

          Und?

          +---+----------+---+
            |   |          |   |
            |   |          |   |
            | 1 |     2    | 3 |
            |   |          |   |
            |   |          |   |
            +---+----------+---+

          Links floaten lässt du die Bereiche 1 und 2.

          Du meintest sicher "nur 1 links floaten" und "3 rechts floaten". "2" sucht sich sich schon seinen Platz. ;-)

          Mit freundlichen Grüßen,
          André

          --
          Ein Geleitzug aus tausend Explosionen
          irgendwo in den Sternen verborgen
          relatives Sein zerbricht die Stille
          eine Träne flüstert Gottes Wille
          1. Hallo Zeromancer.

            Du meintest sicher "nur 1 links floaten" und "3 rechts floaten". "2" sucht sich sich schon seinen Platz. ;-)

            Nö. Versuch ruhig einmal, dem div#two das float wegzunehmen.

            Einen schönen Montag noch.

            Gruß, Ashura

            --
            Last Tears Keep Calling
            See Angels Falling
            Black Shadows In Your Head
            And One Eye For The Dead
        2. Hi,

          Nein. Überlege Dir bitte, welche Beite ein gefloatetes Element hat und welche Breiten gewünscht sind.

          Und?

          dann gib hier mal div#two { background:red; } an - vorausgesetzt Du hast das nicht zufällig als Hintergrundfarbe im Browser eingestellt. Das klappt so nur, wenn der Inhalt breit genug oder es egal ist, wie breit die Box tatsächlich ist (d.h. keine border oder Hintergrundfarbe hierfür definiert werden muß).

          freundliche Grüße
          Ingo

          1. Hallo Ingo.

            Und?

            dann gib hier mal div#two { background:red; } an - vorausgesetzt Du hast das nicht zufällig als Hintergrundfarbe im Browser eingestellt.

            Ah, jetzt verstehe ich was du meinst.

            Das klappt so nur, wenn der Inhalt breit genug oder es egal ist, wie breit die Box tatsächlich ist (d.h. keine border oder Hintergrundfarbe hierfür definiert werden muß).

            Ja, stimmt.

            Nichts für ungut.

            Einen schönen Dienstag noch.

            Gruß, Ashura

            --
            Last Tears Keep Calling
            See Angels Falling
            Black Shadows In Your Head
            And One Eye For The Dead
  4. sorry für den doppelt post, aber ich ordne den beitrag mal hier an, habe mich zuvor vertan

    ersteinmal danke für eure hilfe

    @ ashura ich habe die id so gewählt, damit es hier im forum eventuell verstädnlicher wird und wenn ich es so mache wie du es vorgeschlagen hast bekommt der container in der mitte
    #content_container ;)
    nicht die volle breite zugeordnet, die verfügbar wäre, sonder nur einen teil

    das gleiche gilt für den beitrag von zeromancer, da er fast das gleiche vorgeschlagen hat :)

    ich werde mir nochmal die seiten anschauen, die als link angegeben worden sind,
    bin aber natürlich froh über jedes weitere posting, zu dem thema :)

    1. Hallo ridda.

      Warum antwortest du mir nicht direkt?

      @ ashura ich habe die id so gewählt, damit es hier im forum eventuell verstädnlicher wird und wenn ich es so mache wie du es vorgeschlagen hast bekommt der container in der mitte
      #content_container ;)
      nicht die volle breite zugeordnet, die verfügbar wäre, sonder nur einen teil

      Kann ich nicht nachvollziehen.
      Der mittlere Bereich nimmt den verbliebenen Platz ein. (Dass du Bereich 1 und 3 eine Breite verpassen musst, sollte klar sein.)

      Einen schönen Montag noch.

      Gruß, Ashura

      --
      Last Tears Keep Calling
      See Angels Falling
      Black Shadows In Your Head
      And One Eye For The Dead
  5. Hallo ridda

    ich möchte gern drei divs nebeneinander platzieren.
    und zwar folgend:
    div_links und div_rechts bekommen eine feste breite und div_mitte soll die restliche,vorhandene breite einnehmen wie etwa diese tabelle:

    Schau dir mal die Seite an, die ich mir gemacht habe, um float zu verstehen:
    http://d-graff.de/selfhtml/dreidivs.html

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
  6. ok ok, ich glaub euch jetzt :)

    war sehr freundlich von euch hier gleich zu helfen.
    ich hab auch schon anderes erlebt in diversen foren...
    ich mach mich jetzt mal dran das problem zu lösung

  7. Tach,

    bin neu hier.

    Würde vorschlagen:
    1. Die drei div's in ein div zupacken.
    2. Container-div auf position: relativ setzen.
    3. Die beiden flankierenden div's absolut Positionieren.
    4. Das mittlere div mit margin-left und margin-right so zusammen zustauchen das es vollständig sichtbar ist.

    Vorteil: Die Reinfolge der div's im Quelltext ist egal.

    Nachteil: Wenn das mitlere div in der Höhe kleiner ist als die aüsseren div's kommt es zu unansehnlichen Ergebnissen.

    Wer Rechtschreibfehler findet darf sie behalten.