zwei divs zentrieren

[Verzweifelter]

Leute, so bescheuert gestresst war ich noch nie.

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

Mittlerweile bin ich bei diesem Minimalbeispiel und ich kapier's nicht.

html:

  
<div class=outer><div class=eins>eins</div><div class=zwei>zwei</div></div>  

css:

  
.eins {}  
.zwei {float:right}  
.outer{margin:0 auto; width:100%}  

Ergebnis = ungewünscht: egal welche floats ich für die inneren divs versuche, das zweite div fliegt in eine scheiss ecke des großen. Wie kriege ich die inneren Divs nebeneinander UND zentriert im großen?

Bitte bitte bitte sagt mir die Lösung. Und bitte keine Alternativvorschläge ala benutz doch eine Tabelle...

[Detlef G.]

Hallo du Verzweifelter

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

<div class=outer><div class=eins>eins</div><div class=zwei>zwei</div></div>

>   
> css:  
> ~~~css
  

> .eins {}  
> .zwei {float:right}  
  
Du musst mindestens das erste Element floaten. Nicht das Element, dem du float gegeben hast fließt um die anderen sondern der Rest fließt um dieses.  
  

> .outer{margin:0 auto; width:100%}

Wie soll da etwas zentriert werden?
Wenn das Element die gesamte Breite einnimmt, bleibt kein Platz mehr für seitliche Abstände.

Ergebnis = ungewünscht: egal welche floats ich für die inneren divs versuche, das zweite div fliegt in eine scheiss ecke des großen. Wie kriege ich die inneren Divs nebeneinander UND zentriert im großen?

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

Auf Wiederlesen
Detlef

[Aufgeber]

Wie soll da etwas zentriert werden?
Wenn das Element die gesamte Breite einnimmt, bleibt kein Platz mehr für seitliche Abstände.

Danke für diesen Kommentar. Es ist richtig, was Du sagst. Aber ich suche immer noch die Lösung.

In meinem Fall sind die inneren jeweil 100px

Du sagst:

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

a) Ich habe mit diesem Tipp ein totale Antilösung hinbekommen aber nach diesem Shema:
Äußeres div auf width:230px
inneres linkes auf float:left
inneres rechtes auf float:right

Das finde ich total unschön, weil es überhaupt nicht der Logik entspricht, die ich angestrebt habe. Bitte sag mir mal, ob ich css nicht verstehe oder wie.

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.

Geht das überhaupt?

Gute Nacht

Auf Wiederlesen

Ja, eben so.

[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

[Besänftigter]

Danke erstmal für die Mühe.

Ja und?
Hast du dir angesehen, bei welchen Browsern die roten Knöppe sind?

Da habe ich tatsächlich nicht drauf geachtet.

Ach so soll es aussehen?

VIELEN DANK für Deinen css-Code. Genaugenommen ist es das

border-left:150px solid blue;

welches die Lösung brachte. Ich war die ganze Zeit auf der Suche nach einem Zentrieren-Befehl ohne absolute Abstände angeben zu müssen. Das war wahrscheinlich der Fehlgedanke. Ich dachte es müsse eine Lösung geben ohne die Breite der beiden Buttons in px zu kennen oder kennen zu müssen.

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!

Danke, dass Du da nochmal drauf eingehst. So war es:
Unter einem Formular sollen zwei Button:
 __________    ___________
| Absenden |  | Abbrechen |

Der Absendebutton ist ein <input type=image> element. Dann habe ich aus dem Abbrechen ein <a class=resetbutton href=index.php></a> gemacht und per css diese Klasse auf display:block gestellt um es aufzuspannen und ein Bild reinzupacken. Hätte das mit dem Link so machen sollen, wie Du sagst, dann hätte ich mir die Arbeit  mit den Blockelementen gespart.

ABER: ich war gestern an einem Punkt, an dem ich wissen wollte, wie die Lösung, die ich wollte aussehen müsste. Man frickelt ja oft irgendeinen css-Code zusammen. Aber diesmal war ich echt am verzweifeln.

Vielen Dank, das Du mir die Lösung erklärt hast.