Daniel N.: zwei floatende Boxen zentrieren

SELF-Forum

zwei floatende Boxen zentrieren

Daniel N.
– Informationen zu den Bewertungsregeln

Hi,

ich kämpfe (mal wieder) damit, mittels css meine <div>s zu positionieren.

Ich möchte erreichen, dass zwei <div>-Boxen nebeneinander erscheinen und zusätzlich auf dem Bildschirm, bzw. im <body> horizontal zentriert dargestellt werden.

Folgende Skizze verdeutlicht mein Vorhaben:

+--------------------------+
|     +-----+  +-----+     |
|     |     |  |     |     |
|     |     |  |     |     |
|     |     |  |     |     |
|     +-----+  +-----+     |
+--------------------------+

Ich dachte dieses dadurch erreichen zu können, das ich die Boxen links floaten lasse und für <body> ein "margin:auto" einstelle.

Anscheinend ist das aber nicht der richtige Ansatz für mein Vorhaben!?

Wie lautet der richtige Ansatz?

Vielen Dank und viele Grüße
Daniel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. zwei floatende Boxen zentrieren

    Mike©
    – Informationen zu den Bewertungsregeln

    Moin Daniel,

    Wie lautet der richtige Ansatz?

    u.U. findest Du hier eine Antwort / Ansatz
    http://suche.de.selfhtml.org/cgi-bin/such.pl?suchausdruck=float+Boxen+zentrieren+&feld=alle&index_4=on&index_5=on&hits=100

    regds
    Mike©

    --
    Freunde kommen und gehen. Feinde sammeln sich an.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. zwei floatende Boxen zentrieren

      Daniel N.
      – Informationen zu den Bewertungsregeln

      Hi,

      u.U. findest Du hier eine Antwort / Ansatz
      http://suche.de.selfhtml.org/cgi-bin/such.pl?suchausdruck=float+Boxen+zentrieren+&feld=alle&index_4=on&index_5=on&hits=100

      leider ist das nicht das was ich suche :-(
      Trotzdem danke für den Hinweis.

      Daniel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. zwei floatende Boxen zentrieren

    Daniel N.
    – Informationen zu den Bewertungsregeln

    Hallo,

    vielleicht ist mein Vorhaben noch nicht ganz klar. Daher poste ich einfach einmal meinen Versuch das gewünschte umzusetzen:

      
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<title>Test: 2 Boxen horizontal zentrieren</title>  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  
<style type="text/css">  
  
body {  
 background-color: silver;  
 color: black;  
 margin: auto; /* ?? */  
 padding: 0;  
}  
  
div {  
 width: 30em;  
        margin: auto; /* ?? */  
 background-color: green;  
 float:left;  
}  
  
</style>  
  
</head>  
  
<body>  
  
<div>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam  
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis  
autem veleum iriure dolor in hendrerit in vulputate velit esse molestie  
consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero  
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
zzril delenit augue duis dolore te feugait nulla facilisi.  
</div>  
  
<div>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam  
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis  
autem veleum iriure dolor in hendrerit in vulputate velit esse molestie  
consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero  
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
zzril delenit augue duis dolore te feugait nulla facilisi.  
</div>  
  
  
</body>  
</html>

    Geht das was ich vorhabe überhaupt? Habt ihr keine Idee?

    Vielen Dank und viele Grüße
    Daniel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. zwei floatende Boxen zentrieren

      Detlef G.
      – Informationen zu den Bewertungsregeln

      Hallo Daniel

      div {
      width: 30em;
              margin: auto; /* ?? */
      background-color: green;
      float:left;
      }

      Was sollen die Divs denn nun, links stehen und umflossen werden, oder zentriert sein.

      Du kannst allerdings ein Element zentrieren, und dann innerhalb dieses weitere Elemente floaten lassen.

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. zwei floatende Boxen zentrieren

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        Was sollen die Divs denn nun, links stehen und umflossen werden, oder zentriert sein.

        _Eigentlich_ will er m.E. display:inline-block.
        Da das aber noch nicht genügend unterstützt wird, bleibt das

        Du kannst allerdings ein Element zentrieren, und dann innerhalb dieses weitere Elemente floaten lassen.

        wohl als ein möglicher Workaround.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. zwei floatende Boxen zentrieren

          Daniel N.
          – Informationen zu den Bewertungsregeln

          Hi,

          Du kannst allerdings ein Element zentrieren, und dann innerhalb dieses weitere Elemente floaten lassen.

          Ok, meine Versuch deine Idee umzustzen ergab dieses hier:

            
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<title>Test: Zentrieren im Body</title>  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  
<style type="text/css">  
  
#content {  
 margin: auto;  
}  
  
div {  
 background-color: silver;  
 width: 200px;  
 float: left;  
}  
  
</style>  
</head>  
  
<body>  
  
<div id="content">  
  
<div>  
<h1>Eine Box</h1>  
<p>Die erste Box.</p>  
</div>  
  
<div>  
<h1>Noch eine Box</h1>  
<p>Die zweite Box.</p>  
</div>  
  
</div>  
  
</body>  
</html>

          Klappt leider nicht, wo ist der Denkfehler?

          Vielen Dank
          Daniel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. zwei floatende Boxen zentrieren

            Detlef G.
            – Informationen zu den Bewertungsregeln

            Hallo Daniel

            Ok, meine Versuch deine Idee umzustzen ergab dieses hier:

            ...
            #content {
            margin: auto;
            }

            Wie breit ist #content?

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. zwei floatende Boxen zentrieren

        Daniel N.
        – Informationen zu den Bewertungsregeln

        Hi Detlef,

        Du kannst allerdings ein Element zentrieren, und dann innerhalb dieses weitere Elemente floaten lassen.

        An soetwas dachte ich, meine Umsetzung war nur miserabel ;-)

        Wahsaga hat einen ähnlichen Vorschlag gemacht, dort habe einen nächsten Versuch gepostst, klappt leider immer noch nicht:
        https://forum.selfhtml.org/?t=135634&m=880970

        Viele Grüße
        Daniel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. zwei floatende Boxen zentrieren

    Daniel N.
    – Informationen zu den Bewertungsregeln

    Hallo nochmal,

    schonmal Danke für eure Anregungen.

    Ich habe einen weiteren Ansatz gefunden: Vielleicht können an dieser Stelle "display:table" und Verwandte sinnvoll verwendet werden.

    Was meint ihr? Könnte das eine sinnvolle Lösung ergeben?

    Viele Grüße
    Daniel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln