Float Problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Float Problem

    Hallo, ich sehe im Moment den Wald vor lauter Bäumen nicht mehr,
    weswegen ich um hilfe bitten möchte.

    So soll mein vorhaben mit CSS umgesetzt werden:
    Code:
    ---------Box A ----------------------------       -----Box C----
    ------Text Box A--------------------------       ---Text C-----
                                                                    ---Text C-----
    ---Box B1--- ---Box B2--- ---Box B3---      ---Text C-----
    ---Text B1-- ---Text B2-- ---Text B3--       ---Text C-----
    So versucht habe ich es mit mehreren Divs von einem Beispielquellcode ...


    Code:
    <div id="container">
    
     <div id="smallbox">
    <div class="boxhead" id="boxA">
    TabA
    </div>
    <div class="boxcontent" id="boxA">
    Einigung
    </div>
    
    <div id="smallboxA">
    <div class="boxhead" id="boxB">
    Tab1a
    </div>
    <div class="boxcontent" id="boxB">
    dddd
    </div> </div>
    <div id="smallboxA">
    <div class="boxhead" id="boxB">
    Tab1b
    </div>
    <div class="boxcontent" id="boxB">
    dddd
    </div> </div>
     <div id="smallboxA">
    <div class="boxhead" id="boxB">
    Tab1c
    </div>
    <div class="boxcontent" id="boxB">
    dddd
    </div> <br style="clear:both;"></div>
    
    </div>
    
    
    
     <div id="smallbox">
    <div class="boxhead" id="boxC">
    TabC
    </div>
    <div class="boxcontent" id="boxC">
    xxxxxxxx
    </div></div>
    
    </div>
    Die CSS Datei dazu:
    Code:
    div#container{
    width: 990px;
    margin:0 auto 0px;
    padding:0px;
    text-align: left;
    
    overflow: hidden;
    }
    
    
    div.boxhead{
    margin-top:20px;
    width:624px !important;
    width:624px;
    height: 19px !important;
    height: 19px;
    border:solid 2px #3578B5;
    border-bottom:solid 1px #3578B5;
    background-color: #E5ECF9;
    padding-top:2px;
    padding-left:3px;
    padding-right:3px;
    position: relative;
    left: 10px;
    font-weight:bold;
    }
    
    div.boxcontent{
    width:624px !important;
    width:624px;
    background-color: #fff;
    text-align:left;
    border:solid 2px #3578B5;
    border-top:none;
    position: relative;
    left: 10px;
    padding: 3px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    }
    
    div#boxA{
    width: 729px !important;
    width: 729px;
    float:left;
    clear:left;
    }
    div#boxB{
    width: 237px !important;
    width: 237px;
    margin-left: 10px;
    float:left;
    clear:left;
    }
    
    div#boxC{
    width: 230px !important;
    width: 230px;
    margin-left: 10px;
    float:left;
    clear:left;
    }
    
    
    
    
    div#smallbox{
    float:left;
    
    }
    div#smallboxA{
     float:left;
    
    }
    Wenn ich eine boxB unter die boxA setze, dann landet die boxC rchts oben, wenn ich aber drei mal boxB neben einander unter der boxA setzen will, dann landen alle 4 kleinen Boxen rechts neben der boxA.

    Hoffentlich kann mir jemand helfen.
    Vielen Dank im Vorraus
    flo

  • #2
    Kann man das irgendwo online sehen? Ich kann nicht so gut kopfrendern.

    Kommentar


    • #3
      http://www.freeweb24.de/test_css.html

      Das ist das, was daraus derzeit wird.

      Kommentar


      • #4
        als erstes solltest du deine divs mal richtig verschachteln, da fehlt nämlich eines. und eine id darf pro seite nur einmal(!) vorkommen. und drittens solltest du nicht für jeden tinnef ein div nehmen. stichwort div-suppe.

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Mit den Ids hab ich gesehen, dass es manche seiten so machen. die divs sind eigentlich alle geschlossen, hab jetzt diese nachgezählt. Auch wenn die Divs verschachtelt sind, gebe es in der seite weit weniger quellcode, der imer wieder geladen werden müsste. Allerdings krige ich es net in die richtige Position. Mit Tabellen wäre ich da längs fertig ...

          Kommentar


          • #6
            also wenn deine inhalte tabellarischer natur sind (was so ausssieht), dann darfst für die (!) ruhig tabellen nehmen. hau ein rahmen-div herum, packe tabelle a und b in ein div und tabelle c in ein anderes. und die beiden floatest du dann.

            gruß
            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Das soll jetzt eine Unterseite werden, da es ja modern werden soll, habe ich es bis dahin geschaft auf tabellen zu verzichten. Es wäre uncool dann auf einer seite doch ne tabelle zu haben.

              Kommentar


              • #8
                Es wäre uncool dann auf einer seite doch ne tabelle zu haben.
                nur weil layouttabellen nicht mehr genutzt werden, heißt das nicht, dass man auf datentabellen(!) verzichten soll.

                gruß
                peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  ansonsten kann man divs auch ein Tabellenlayout verpassen

                  Ein rahmendiv mit:
                  Code:
                  display: table;
                  darin 2 divs mit jeweils:
                  Code:
                  display: table-cell;
                  dann kann man dem einen noch ein
                  Code:
                  float: left;
                  und dem andren ein
                  Code:
                  float: right;
                  verpassen und schon klappts auch mit dem anordnen

                  Kommentar


                  • #10
                    Dankeschön für die Antwort. Das Problem hat sich gelöst. Vielmehr wurde mir geholfen. Schönes We
                    flo

                    Kommentar

                    Lädt...
                    X