Konrad Urlichs: Blöcke nebeneinander

Hallo,

Habe folgendes Problem. Ich will zwei Elemente nebeneinander positionieren. Dafür müsste ich eigentlich die Elemente als inline ausweisen. Dann kann ich allerdings keine Breite angeben.
Ich weiss, dass das das alles mit einer Tabelle ginge, aber ich wollte das mal so probieren.

Also hier nochmal was ich will:

-------------------     -------------------
----- Block 1 -----     ----- Block 2 -----
-------------------     -------------------

mit bestimmter Breite.

Ich bekomms nicht hin. Hier ein Ansatz von mir, der nicht funktioniert, weil die Browser für Block-elemente (display:block) eine neue Zeile einziehen.

<html>
<body>
    <div style="display:inline">
        <div style="display:block; width:200px; background-color:blue;">Box1</div>
    </div>
    <div style="display:inline">
        <div style="display:block; width:200px; background-color:maroon;">Box2</div>
    </div>
</body>
</html>

Danke
   Konrad

  1. hi

    <div style="display:inline">
            <div style="display:block; width:200px; background-color:blue;">Box1</div>
        </div>
        <div style="display:inline">
            <div style="display:block; width:200px; background-color:maroon;">Box2</div>
        </div>

    SO handelst du dir wenn überhaupt etwas passiert nur Vali-Ärger ein (block-Element im inline-Element..)
    In CSS 3 soll es ein "inline-block" geben, was sich aber nach meiner Erfahrung weniger von 'block' unterscheidet (in Mozilla ist da was implementiert), als man vielleicht hoft :(
    derzeit wird man wohl nur mit float:left an der Linken box etwas erreichen. ACHTUNG: Netscape 4.....

    Grüße aus Bleckede

    Kai

    1. In CSS 3 soll es ein "inline-block" geben, was sich aber nach meiner Erfahrung weniger von 'block' unterscheidet (in Mozilla ist da was implementiert), als man vielleicht hoft :(

      Aber das kann doch nicht war sein! Man muss es doch schaffen können, ein paar Blöcke nebeneinander zu setzen!
      Man fasst es nicht.

      derzeit wird man wohl nur mit float:left an der Linken box etwas erreichen. ACHTUNG: Netscape 4.....

      So habe ich es dann in meinem Problem gelöst, mich aber dann gefragt, was passiert, wenn ich mehr als zwei Blöcke nebeneinander haben will.

      Ich weiss, ich bin schwierig, aber ich halte das eigentlich für eine elementare Sache, die doch zu machen sein müsste.

      CU
         KOnrad

      1. hi

        So habe ich es dann in meinem Problem gelöst, mich aber dann gefragt, was passiert, wenn ich mehr als zwei Blöcke nebeneinander haben will.

        3 blöcke, 2 mal float:left -> sollte passen

        Grüße aus Bleckede

        Kai

  2. Das geht so:

    <p style="display: table-row;">
    <span style="display:table-cell; with:6em">Block 1</span>
    <span style="display:table-cell; with:6em">Block 2</span>

    [beliebig viele Blöcke]
    </p>

    Du mußt ein bißchen rumprobieren, weil die einzelnen Browser manchmal recht unterschiedliche Vorstellungen davon haben; aber im Grunde funktioniert's recht gut. Nur eben nicht im NN4, der das einfach hintereinander (also noch lesbar) zeigt.

    Gruß

    Lydia