Float-Problem

[Bernd H.]

Hallo,

ich bin gerade dabei ein neues Design mit CSS zu erstellen.

Mein bisheriges Ergebnis gibt es unter
http://bannerex.de/designtest/extern.html
zu "bewundern".

Zu meinem Problem. Der 4. Container soll direkt neben Container 2+3 stehen. Z. Zt. steht er jedoch unter den beiden Kästen am rechten Rand. Hat jemand eine Idee, wie ich den Container etwas nach oben setzen kann?

Am Ende soll die Seite mal so aussehen:
http://bannerex.de/designtest/mainpage.jpg

Vielen Dank im voraus.

Gruß
Bernd

[Gernot Back]

Hallo Bernd,

Mein bisheriges Ergebnis gibt es unter
http://bannerex.de/designtest/extern.html
zu "bewundern".

Zu meinem Problem. Der 4. Container soll direkt neben Container 2+3 stehen. Z. Zt. steht er jedoch unter den beiden Kästen am rechten Rand. Hat jemand eine Idee, wie ich den Container etwas nach oben setzen kann?

Dein Container4 ist breiter als der zur Verfügung stehende freie Platz. Das liegt daran, dass du Margin und Padding in Bezug auf das HTML- und das BODY-Element nicht bedacht und bei den Angaben zur Breite der Container und denjenigen zu deren Padding, (Margin) und Border-Width Angaben in Prozent und solche in Pixeln gemisch hast.

Wie viel Prozent der Fensterbreite z.B. drei Pixel einnehmen, das hängt ja ganz von der Breite des Fensters ab, und so kommen dann halt mal leicht mehr als 100% Breite für die Elemente zusammen die du eigentlich gerne nebeneinander hättest. Das Prinzip von Float ist es ja gerade, dass das letzte Element dann nach unten "wegfließt".

Am Ende soll die Seite mal so aussehen:
http://bannerex.de/designtest/mainpage.jpg

Gruß Gernot

[Bernd H.]

Hallo Gernot,

Dein Container4 ist breiter als der zur Verfügung stehende freie Platz. Das liegt daran, dass du Margin und Padding in Bezug auf das HTML- und das BODY-Element nicht bedacht und bei den Angaben zur Breite der Container und denjenigen zu deren Padding, (Margin) und Border-Width Angaben in Prozent und solche in Pixeln gemisch hast.

Wie viel Prozent der Fensterbreite z.B. drei Pixel einnehmen, das hängt ja ganz von der Breite des Fensters ab, und so kommen dann halt mal leicht mehr als 100% Breite für die Elemente zusammen die du eigentlich gerne nebeneinander hättest. Das Prinzip von Float ist es ja gerade, dass das letzte Element dann nach unten "wegfließt".

vielen Dank für den Tipp, genau das wars. :-)

Hast du noch eine Idee, wie ich den Text "container1", "container2" und "container3" vertikal zentrieren kann, so dass der Text mittig zur Grafik ausgerichtet wird?

http://bannerex.de/designtest/extern.html

Grüße
Bernd

[Gernot Back]

Hallo Bernd,

Hast du noch eine Idee, wie ich den Text "container1", "container2" und "container3" vertikal zentrieren kann, so dass der Text mittig zur Grafik ausgerichtet wird?

http://bannerex.de/designtest/extern.html

Ich fürchte, da musst du noch ein floatendes Blockelement mit text-align:center; um deine Images drumherum bauen, die selbst dann des Floats allerdings nicht mehr bedürfen, sondern nur noch eines display:block;'s und den Text mit in das gruppierende Floatelement schreiben.

Gruß Gernot