[CSS box model] Chrome zickt

[no remorse]

Hallo

Folgendes Problem ist kein phpwcms Problem, jedoch hoffe ich, dass mir trotzdem einer helfen bzw. einen Tipp geben kann

Ich bin gerade dabei, eine Vorlage zu erstellen, welche 12 Boxen beinhaltet.

CSS:

Code: Select all

.minibox {
	
   float:left;
	position:relative;
	width:148px;
	height:139px;
	margin:5px; /* margin:5px 13px 5px 5px; */
	background:#111 url(/static/img/progress.gif) no-repeat center center;
	border:1px solid #B5FF00;
	/*box-shadow:0 1px 2px rgba(181, 255, 0, 1);*/
}

.container {
    margin: 0px auto 0;
    width: 960px;
    color: #fff;
    background-color:#000;
    min-height:304px;
}

Die 12 Boxen werden mir im iExplorer und Firefox nebeneinander angezeigt jedoch nicht im Chrome.

Hier zwei Bilder:



Im obigen Code habe ich die Platzhaler weg gelassen und nur der Quellcode eingefügt. Das Problem liegt wohl bei

Code: Select all

margin:5px; /* margin:5px 13px 5px 5px; */

oder muss ich da eine 6-spaltige Tabelle einfügen, damit alles ordentlich aussieht?

Verzeiht mir meine Bescheidenheit.

lg

[nameless1]

gibts was live fürn firebug?

[Oliver Georgi]

1) was soll die min-height? wegen der floats? Bitte mal mit clearfix beschäftigen: http://nicolasgallagher.com/micro-clearfix-hack/
2) .container mit position:relative versorgen und mal fixe Breite rausnehmen und prüfen was dann bei Browserweitenänderung passiert
3) den boxen ein vertical-align: top mitgeben

[no remorse]

Hallo

Ich hab mal versucht, die Vorschläge umzusetzen. Es schaut nun schon besser aus:

http://www.feuerwehr-vaduz.li/index.php ... 52,0,0,1,0

Gibts da eventuell noch einen Trick, wie man die Boxen (140x140) gleichmäßig auf der Fläche (960) verteilt oder hilft da nur einen Taschenrechner --> exaktes ausrechnen der Abstände?

mfg

[Oliver Georgi]

die leeren Clear Divs unbedingt vermeiden. Das ist nicht mehr nötig und nicht zu empfehlen, vollkommen überflüssig und unschön. Einfach meinem Hinweis folgen.

Für den Rest muss man sich mit Responsive CSS beschäftigen. Solange Du mit Pixel-festen Breiten arbeitest kommst Du um das Ausrechnen nicht herum.