Jean Pascal: Kein Zeilenumbruch bei DIV...?

Hallo nochmals,

ist es eigentlich möglich zu verhindern, dass zwei nebeneinander stehende DIVs plötzlich nicht mehr in einer Zeile sind, wenn man die Breite des Browsers verschmälert? Bei mir ergibt sich da ein Umbruch... Wahrscheinlich ein grober Denkfehler?

Danke, Jean

  1. Und es sollte auch ein Abstand zwischen den DIVs erhalten bleiben. Mit position: absolute schiebt sich ja alles übereinander...

    Garnicht so leicht, der Umstieg von Tabellen auf CSS :-)...

  2. Hi,

    ist es eigentlich möglich zu verhindern, dass zwei nebeneinander stehende DIVs plötzlich nicht mehr in einer Zeile sind, wenn man die Breite des Browsers verschmälert?

    Natürlich ist das möglich.
    Wenn Du die divs mit float nebeneinander platzierst, mußt Du nur dafür sorgen, daß deren Inhalte ncht zu breit sind und noch nebeneinander passen. Wenn Du bei zu breiten Inhalten aber lieber einen Scrollbalken hast, dann brauchst Du ein Elternelement mit entsprechender Breite.

    freundliche Grüße
    Ingo

    1. Hallo Ingo,

      danke für den Post.

      Das Problem bei dieser Lösung ist, dass sich die Boxen garnicht mehr der Größe des Browsers anpassen.

      Ich habe aber eine zufriedenstellende Möglichkeit gefunden: Das Einbinden einer entsprechend breiten 1px hohen Grafik in das übergeordnete flexible DIV.

      Gruß Jean

  3. Hallo Ingo,

    ich bin nicht in diesem Thread geblieben, weil es sich um eine neue Problematik handelt.

    In dem geposteten Quelltext ist kein float, um zu zeigen wie es vorher aussah. Wenn man aber an der Stelle wo ich eine Leerzeile gelassen hatte ein Float einfügt, passiert das, was ich beschrieben habe.

    Hier der Code mit float:

    body {
     background-color: #FFFFFF;
     font-size: 101%;
     margin: 0em 0em 0em 0em;
     }

    div.a1 {
     width: 400px;
     height: 300px;
     border: solid 0.25em #000000;
     float: left;
     }

    div.a2 {
     width: 400px;
     height: 300px;
     border: solid 0.5em #DDDDDD;
     }

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd"><html>

    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>

    <div class="a1"><img src="_a1.gif"></div>

    <div class="a2"><img src="_a2.gif"></div>

    </body>

    </html>

    Danke, Jean

    1. Das Problem tritt übrigens erst auf, seitdem beide DIVs in Pixeln definiert sind, statt in em. Aber es kann doch nicht sein, dass man keine 2 DIVs nebeneinander plazieren kann, die Pixel als Einheit haben, oder?

      Jean

    2. Hallo Jean,

      Hallo Ingo,

      warum antwortest du auf deinen eigenen Beitrag, obwohl du Ingo ansprichst? Wieso passiert das den Leuten immer mal wieder? Du hast doch direkt über dem Eingabefeld den Originaltext, auf den du antwortest...

      Verständnislose Grüße in die Nacht,

      Martin

      --
      why the heck do you jerk think, that wir ein doppelposting nicht bemerken, wenn you zwischendurch the sprache wechselst?
        (wahsaga, http://forum.de.selfhtml.org/?t=110904&m=697006, nicht archiviert)
      1. Hallo Martin.

        Hallo Ingo,

        warum antwortest du auf deinen eigenen Beitrag, obwohl du Ingo ansprichst?

        Deswegen wahrscheinlich.

        Einen schönen Samstag noch.

        Gruß, Ashura

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

      ich bin nicht in diesem Thread geblieben, weil es sich um eine neue Problematik handelt.

      aber um das gleiche Thema: zwei nebeneinander stehende DIVs. Und wenn Du Dein neues Problem dabei kenntlich machen willst, nutze in der Vorschau die Möglichkeit, den Titel zu ändern.

      In dem geposteten Quelltext ist kein float, um zu zeigen wie es vorher aussah.

      Warum postest Du ihn dann? Die Kenntnis, daß zwei nicht anders formatierte Blockelemente untereinander stehen, darfst Du hier voraussetzen.

      Aber zur Erklärung Deines float-Problems. Schau Dir mal dieses Beispiel an. Wie Du an den Rahmen siehst, beeinflußt die floatende Box die nachfolgende nichtfloatende Box nicht, sondern nur ihren inline-content (den Text). Du hast beiden Boxen nun ungefähr (wegen des unterschiedlichen border) dieselbe Breite gegeben. Die Rahmen fallen deshalb in standardkonformen Browsern (also nicht im IE) übereinander. Der inline-content (das Bild) paßt aber natürlich nicht mehr neben die floatende Box und muß (in standardkonformen Browsern) daher unter der floatenden Box dargestellt werden.

      Ich empfehle Dir, dieses Kapitel über CSS-basierte Layouts durchzulesen, dann solltest Du auch float besser verstehen.

      Dein Problem hättest Du übrigens nicht gehabt, wenn Du auf die überflüssigen DIVs verzichtet oder der nichtfloatenen Box ein passendes margin oder keine einschränkene Breite gegeben hättest.

      freundliche Grüße
      Ingo

      1. Hallo Ingo,

        Die Kenntnis, daß zwei nicht anders formatierte Blockelemente
        untereinander stehen, darfst Du hier voraussetzen.

        Da hast du wohl Recht, das war unnötig.

        dieses Beispiel

        Das Beispiel hatte ich bereits gelesen, aber irgendwie stand ich auf dem Schlauch. Jetzt ist es mir klar. Ich konnte mich wohl nicht vom "Tabellengedanken" lösen, dass TDs nebeneinander dargestellt werden und nicht überlappend.

        Kann man eigentlich DIVs auch ohne float nebeneinander darstellen?

        wenn Du auf die überflüssigen DIVs verzichtet

        Ich wollte mich nur mit der Technik vertraut machen. Das war kein Beispiel, das so hätte eingesetzt werden sollen.

        Ich hab übrigens auch den em-Artikel auf deiner Seite gelesen. Fand ich sehr aufschlussreich.

        Du kennst dich gut aus, wieso arbeitest du nicht in diesem Bereich?

        Gruß Jean

        PS: Die Idee mit der Grafik aus meinem anderen Post hat nicht geklappt, da sich das DIV ja, wie bemerkt, nicht nach der Grafik richtet.

        1. Hi,

          Kann man eigentlich DIVs auch ohne float nebeneinander darstellen?

          freilich. Z.B. durch die display-Eigenschaft inline oder (für moderne Browser) table-cell sowie durch eine entsprechene position-Eigenschaft.

          Du kennst dich gut aus, wieso arbeitest du nicht in diesem Bereich?

          Das mache ich doch nebenbei, z.B. bei SELFHTML. Für eine hauptberufliche Tätigkeit müßte ich erstmal Kunden finden.

          freundliche Grüße
          Ingo

          1. Hallo Ingo,

            danke, inline hat mir geholfen.

            Ich denke mit deinem Wissen dürfte es nicht schwierig werden, Auftraggeber zu finden.

            Gruß Jean