float check ich nicht

[funk-feuer]

Hallo,

ich möchte eine Website basteln, die 4 div-Boxen hat, zwei oben und zwei darunter. Nun habe ich auch gelesen, dass man die Anordnung der Boxen mit float realisieren kann. Leider klappt das bei mir nicht. Die Boxen stehen unter einander, nicht zwei oben und zwei unten.

Es kommt mir auch vor, als würde ich eine viel zu langen Quelltext schreiben. Kann man das verkürzen?

#layer_mitte1 {
float: left;
height: 230px;
width: 400px;
top: 0px;
left: 0px;
}

#layer_mitte2 {
height: 230px;
width: 400px;
top: 0px;
left: 400px;
}

#layer_mitte3 {
float: left;
height: 230px;
width: 400px;
top: 0px;
left: 0px;
}

#layer_mitte4 {
height: 230px;
width: 400px;
top: 0px;
left: 4000px;
}

Vielen Dank!!!!

funk-feuer

[Nele]

Hallo,

wenn du divs floatest, dann sind die Angaben für top und left falsch. Die braucht man nur im Zusammenhang mit absoluter oder relativer Positionierung. Gefloateten divs könntest du mit margin einen Außenabstand zuweisen.

Wenn du willst, dass die divs nebeneinander stehen (bei float), brauchen sie natürlich auch genügend Raum. Wenn das Browserfenster z.B. kleiner wäre, würden sie auch umbrechen. In diesem Fall hilft ein äußerer div (um die gefloateten), der genügend Raum schafft und bei kleinerem Browserfenster für Scrollbalken sorgt.

Kürzer schreiben ließe sich dein CSS auf jeden Fall. Du könntest z.B. deinen divs noch dieselbe class geben und für die dann im CSS alle Eigenschaften deklarieren, die für alle divs gleich sind. Hier z.B. findest du aber auch noch andere Möglichkeiten (auch bessere).

Liebe Grüße
Nele

[funk-feuer]

Hallo Nele,

vielen Dank für deine Antwort, Ich habe jetzt die Angaben für top und left rausgenommen und sie haben auch genügend Raum, also die div´s stehen in einem anderen div, was 800 px breit ist und 600 px hoch. Also sollte genau der Paltz da sein. trotzdem zeigt er sie mir immer untereinander an.... Ich habe jetzt auch schon so viel um selfhtml gelesen, dass ich jetzt gar nichts mehr weiß... kennst du das? Vielleicht binde ich das ja auch falsch ins html ein... Kannst du nochmal drauf gucken?

#layer_mitte1 {
float: left;
height: 230px;
width: 399px;
border-right: 2px;
border-right-color: #FFFFFF;
border-right-style: solid;
border-bottom: 2px;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
}

#layer_mitte2 {
height: 230px;
width: 399px;
border-bottom: 2px;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
}

#layer_mitte3 {
float: left;
height: 230px;
width: 399px;
border-bottom: 2px;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
}

#layer_mitte4 {
height: 230px;
width: 399px;
border-bottom: 2px;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
}

Und im html wird es so aufgerufen:

<div id="layer_main">
<div id="layer_mitte1">sdfsdafdsfsdfa </div>
<div id="layer_mitte2">hgjghjgj</div>
<div id="layer_mitte3">swq</div>
<div id="layer_mitte4"> fdgdfglk</div>
</div>

funk-feuer

[Rinaldo]

Man kann nicht immer nur floaten - ok, könnte man schon .

Aber nicht, wenn man auch was untereinander haben will - dann muss man auch mal clear sagen: So gehts bei Dir.

[funk-feuer]

oh, das ist gut! Ich danke dir!!!