Boxen verschieben sich

Billbos

Hallo,

auf der Seite http://billbos.eu/sample/bilder.php habe ich drei Boxen diese sollen nebeneinander, nur die letzte macht einen Zeilenumbruch woran liegt das, denn nach meiner Rechnung müssten sie nebeneinander sein.
Wenn ich bei

Code

ul.bilderbox li.middle {
	float: left;
	width: 240px;
	background: #FFEDA0;
	border-top: none;
	margin: 10px 10px 0 10px;
}

das margin-left und -right rausnehme dann sind sie zwar nebeneinander aber meiner Rechnung würde dann nicht aufgehen.
Jede Box soll 240px breit sein und einen festen Abendstand haben.
Dann ist noch folgendes Problem vorhanden und zwar, dass der Container (runde große Box) die Bilderboxen nicht einschließt, weiss jemand woran das liegt?

Besten Dank

und freundliche Grüße

Billbos

chris90night

Guten Morgen,

das der große Container die drei kleineren nicht einschließt liegt daran, dass du ein "clear:left;" nach den boxen bzw. im Footer einbauen musst.

Merke: "Wo gefloatet wird, muss auch gecleared werden"

Und zu dem anderen Problem: Teilweise hebt sich das "margin" bei dir auf. Du hast ja für oben, rechts und links ein margin angegeben. D.h. zum Beispiel ist dann zwischen der ersten und der zweiten Box ein (theorethischer) Abstand von 20px, weil du einmal von links und von rechts ein margin angibst. Das solltest du vermeiden. Es reicht ja auch, wenn du für alle drei Boxen ein margin-left und ein margin-top-angibst.

MfG, chris90night

sejuma

#containerdefault ist 800px breit.
Die drei Kästen innendrin dagegen 1020px. Also können sie da nicht reinpassen:
linke und rechte Box: 2 x 240px + 2 x 20px margin = 520px
.middle: 480px + 2 x 10px = 500px

synaptic

und dein containermiddle braucht abgesehen von dem was sejuma oben schon für den default beschrieben hat noch nen overflow:hidden, da du ja deine objekte mit float aus dem eigentlichen zusammenhang rausholst..!

Billbos

Hi, danke für die schnelle Hilfe ich denke das Ergebnis kann sich sehen lassen, dennoch habe ich einen leichten Zweifel, da es mir scheint als wären die Boxen nicht mit demselben Abstand versehen. Wenn jemand noch dazu was einfällt wäre ich dankbar für jeden Tipp.

Mfg Billbos

sejuma

Zitat

li.middle {
float: left;
clear: right;
width: 240px;
background: #FFEDA0;
border-top: none;
margin: 15px 15px 0 20px;
padding: 0;
}

Alles anzeigen

Ersetze mal die 20 durch 15

Billbos

Ha genau das wars, aber dann wäre die linke Box mit einem kleineren Abstand zur mittleren als die rechte zur mittleren, jetzt habe ich das Problem folgendermaßen gelöst.

Code

ul.bilderbox li.middle {
    float: left;
    clear: right;
    width: 240px;
    background: #FFEDA0;
    border-top: none;
    margin: 15px 10px 0 20px;
    padding: 0;
}

Kurikinton

Mit dem ganzen "px"-Abstand musst einfach mal ein bischen probieren.
Irgendwann passts dann. Aber immer dran denken: Es gibt keine halben Pixel!

chris90night

Noch was zum Probieren: Ich finde, dass ist nicht die optimale Lösung, da man da zwar auch zum gewünschten Ergebnis kommt, aber wie wir ja gesehen haben, hat jeder Fehler seinen Grund.

Also dann lieber (so wie er es ja auch gemacht hat) das Ganze nachrechnen und verstehen! =)

MfG

Tags