Bollo: css container

Hey Leude

ich will so ne art webpage basteln, und dazu hab ich mir überlegt, das es vll lässig wäre, zwei so kästen nebeneinander zu machen mit CSS oder von mir aus auch Javascipt. coden kann ich ziemlick gut.

mach ma so ne symoblzeichnung:

#1# #2#

kasten 1 und kasten 2  klaro.

mein css code guckt so aus:

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

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

in den ersten div hab ich noch so ein float reingebastelt. aber leider stehen die kästen untereinandern.  So wie ich das verstanden hab, ist jeder Containere ein eigener Body, soweit funzt auch alles. Muss nich extra erwähnen, das die container eigene Ids haben und auch mit css dahinter.

also falls ihr tips habt, nur rüber damit!

Bollo

  1. #1# #2#

    Soviel zu deinen Ziel, fangen wir mal an.

    mein css code guckt so aus:

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

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

    Erstens ist das angegebene natürlich ein HTML-Code und zweitens hat ein HTML-Dokument immer nur einen Body, in welchem sämtlicher angezeigter Inhalt geschrieben wird.

    So müsste dein Body, mit 2 Containern (Div's) dann eingentlich aussehen.

    <body>  
       <div id="box1></div>  
       <div id="box2></div>  
    </body>
    

    Wir haben hier jetzt 2 Container mit 2 verschiedenen IDs, damit wir diese auch in unserem CSS-Dokument ansprechen können. Diese beiden Container liegen jetzt aber automatisch untereinander. Damit beide nebeneinander liegen geben wir nicht nur einem Div eine Float-Eigenschaft, sondern beiden die selbe. Unzwar wäre in diesem Fall "left" eine Möglichkeit beide schön zu positionieren. Hier mal unser CSS-Dokument:

    #box1 {  
       float: left;  
    }  
    #box2 {  
       float: left;  
    }
    

    Ich habe oben 2 IDs angegeben damit man die Container leichter getrennt bearbeiten kann, aber das hast du ja, man könnte der Übersicht wegen das ganze auch so schreiben:

    #box1, box2 {  
       float: left;  
    }
    

    Um den Abstand zwischen den beiden Containern zu erstellen reicht ein simples margin bei einem der beiden Container.

    -MuscleB

    1. Um den Abstand zwischen den beiden Containern zu erstellen reicht ein simples margin bei einem der beiden Container.

      Den Double Float-Margin Bug aber nicht vergessen, wenn der IE6 nicht mitmacht :)

    2. #box1, box2 {

      float: left;
      }

        
      Hier hat sich bei mir ein kleiner Fehler eingeschlichen,unzwar fehlt das Erkennungszeichen das box2 eine ID ist. Folgendes wäre also wirklich richtig:  
        
      ~~~css
      #box1, #box2 {  
         float: left;  
      }