Float Problem

[flo]

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:

---------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 ...

<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:

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

[onemorenerd]

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

[flo]

http://www.freeweb24.de/test_css.html

Das ist das, was daraus derzeit wird.

[Kropff]

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

[flo]

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 ...

[Kropff]

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

[flo]

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.

[Kropff]

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

[SilentGecko]

ansonsten kann man divs auch ein Tabellenlayout verpassen

Ein rahmendiv mit:

display: table;

darin 2 divs mit jeweils:

display: table-cell;

dann kann man dem einen noch ein

float: left;

und dem andren ein

float: right;

verpassen und schon klappts auch mit dem anordnen

[flo]

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