zwei divs zentrieren

[Detlef G.]

Hallo zu schnell Aufgeber

Entweder das große muss die Gesamtbreite der kleinen haben, oder du schaust dir mal Gunnars Artikel inline-block – eine Alternative zu float an.

b) hatte ich auch schonmal gesehen, allerdings zuviele rote Knöppe

Ja und?
Hast du dir angesehen, bei welchen Browsern die roten Knöppe sind?
Außer den IEs und ein paar 2er FF treten die in freier Wildbahn doch kaum noch auf.
Und Gunnars Artikel geht auf diese auch ein.

a) Ich habe mit diesem Tipp ein totale Antilösung hinbekommen aber nach diesem Shema:

Wieso Antilösung?

Sagen wir das blaue ist 500px, das rote und das grüne je 100px.
Gibt es einen strukturelln Aufbau, bei welchem man sagt: Zentriere die inneren divs (rot und grün) im blauen. Dabei schreibe die inneren nicht übereinander, sondern floate sie umeinander.

Ach so soll es aussehen?

.outer {  
  background-color: blue;  
  width:500px;  
  margin:0 auto;  
  overflow:hidden;      /* um die floats einzuschließen */  
}  
.eins {  
  background-color: red;  
  float:left;  
  border-left:150px solid blue;  /* Abstand links 500/2 - 100 (border statt margin  
                                    vermeidet den double-margin-bug im IE */  
  width:100px;  
}  
.zwei {  
  background-color: green;  
  float:left;  
  width:100px;  
}  

Warum aber so kompliziert?
Nochmal zum Ausgangsposting:

Ich wollte urspünglich mal ein Bild als Link (display:block) neben einem Input (display:block) packen, und die beiden wiederum zentrieren.

Wozu um alles in der Welt soll der Link, das Bild und der Input extra auf display:block gesetzt werden. Sowohl <img> als auch <input> sind keine Blockelemente! Sie erlauben zwar Angaben zu width und height, verhalten sich aber wie Inlineelemente (Inline, replaced elements).
Damit geht es viel einfacher:

<div class="outer1"><a href="#"><img src="bild.png" alt=""></a><input></div>  
  

.outer1 {  
  background-color: blue;  
  width:500px;  
  margin:0 auto;  
  text-align:center;  
}  
img, input {  
  width:100px;  
  height:50px;  
  border:0;  
  vertical-align:bottom;  
}  
img {  
  background-color:red;  
}  
input {  
  background-color:green;  
}

Auf Wiederlesen
Detlef