thewho88: DIV (Höhe unbekannt) innerhalb eines anderen ausrichten

Guten Abend!

Mich quält seit Stunden ein Problem und ich hab keine Ahnung, wie ich es am besten beschreiben soll.

Fakt ist, dass ich einen DIV-Container mit drei Bereichen habe. Oben links stehen Kontaktinformationen (eigener DIV), oben rechts ein Logo (DIV mit float:right) und unten beliebiger Text (DIV mit clear:right).

Soweit kein Problem, nun beabsichtige ich aber, das Logo (DIV 2) relativ zu den Kontaktinformationen (DIV 1) auszurichten. Hinzu kommt noch, dass ich in der Praxis weder die Höhe des 1. DIVs weiß (nicht immer sind alle Zeilen vorhanden), noch die Höhe des Unternehmenslogos. Bisher ist mir mit etwas Herumspielerei lediglich gelungen, das Logo über ein paar position-parameter auf die Höhe der Unterkante des 1. DIVs zu bringen.

Hat jemand eine Idee, wie sich das Problem lösen ließe??

mfg

thewho88

----

Hier mein(stark vereinfachter) Quelltext:

<html>
<head>
<style type="text/css">
<!--
div.box {
width:400px;
padding:5px;
border:1px solid green;
font-size:12px;
}
div.inhalt {
width:200px;
text-align:left;
background-color:yellow;
}
div.ende {
clear:right;
background-color:#FF6699;
}
div.logo {
width:200px;
float:right;
text-align:center;
}
-->
</style>
</head>
<div class="box">
 <div class="logo">
  <img src="http://www.wurst-wasser.net/Wurst-Wasser.net/Wiki-Uploads/christkind.jpg" width="100">
 </div>
 <div class="inhalt">
  <div>Inhaber: ABC</div>
  <div>Musterstraße 99<br>
  1000 Musterstadt</div>
  <div>Tel.: 0000/000 00<br>
  Mobil: 0000/000 00<br>
  Fax: 0000/000 00</div>
  <div>E-Mail: abc@xyz.com<br>
  WWW: www.abc.com</div>
 </div>
 <div class="ende">Öffnungszeiten:<br>&nbsp;</div>
</div>
</html>

  1. Vielleicht so?

    <html>
    <head>
    <style type="text/css">

    div.box {
    width:400px;
    padding:5px;
    border:1px solid green;
    font-size:12px;
    margin: -0px 0 0 -0px;
    }
    div.inhalt {
    width:200px;
    text-align:left;
    background-color:yellow;
    margin: -0px 0 0 -0px;
    }
    div.ende {
    clear:right;
    background-color:#FF6699;
    }
    div.logo {
    width:200px;
    float:right;
    text-align:center;
    position:absolute;
    vertical-align: top;
    margin: 0px 0 0 200px;
    }

    </style>
    </head>
    <div class="box">
     <div class="logo">
      <img src="http://www.wurst-wasser.net/Wurst-Wasser.net/Wiki-Uploads/christkind.jpg" width="100">
     </div>
     <div class="inhalt">
      <div>Inhaber: ABC</div>
      <div>Musterstraße 99<br>
      1000 Musterstadt</div>
      <div>Tel.: 0000/000 00<br>
      Mobil: 0000/000 00<br>
      Fax: 0000/000 00</div>
      <div>E-Mail: abc@xyz.com<br>
      WWW: www.abc.com</div>
     </div>
     <div class="ende">Öffnungszeiten:<br>&nbsp;</div>
    </div>
    </html>

    1. Vielleicht so?

      Danke, aber das sieht bei mir exakt genauso aus wie vorher ...

    2. So sollt es mal aussehen:

      http://img184.imageshack.us/img184/7325/vorschaubw4.gif

      1. Hi,

        So sollt es mal aussehen:

        http://img184.imageshack.us/img184/7325/vorschaubw4.gif

        Also das Logo immer vertikal zentriert in Bezug auf die Hoehe des Adressbereiches?
        Das erreichst du vermutlich am einfachsten, indem du das Logo als Hintergrundbild einbindest (wertvolle Information transportiert es ja offenbar eh nicht).
        Da die Breite des Logobereiches in Pixel fest vorgegeben ist, sollte es sich einfach innerhalb des Containers der Adressinformationen rechtsbuendig und vertikal zentriert ausrichten lassen. Dem Container verpasst du dann einfach ein entsprechendes padding-right, um dort Platz fuer das Hintergrundbild zu lassen.

        Waere dann noch ueberlegenswert, eine Mindesthoehe zu vergeben, um das Bild bei zu kurzem Inhalt nicht abgeschnitten darstellen zu lassen.

        MfG ChrisB

        1. Das krieg ich irgendwie auch ned so hin, dass es meinen Vorstellungen entspricht. Mit ner Tabelle wär'n meine Probleme natürlich passé. ;)

          1. Hi,

            Das krieg ich irgendwie auch ned so hin, dass es meinen Vorstellungen entspricht.

            Dann versuch doch bitte erst mal, eine Problembeschreibung zu verfassen, die unseren Vorstellungen entspricht.

            MfG ChrisB

            1. Okay Fakt ist, dass dein Lösungsvorschlag daran scheitert, dass ich es auch mit Logos zu tun habe, die hochformatig sind. Aus optischen Gründen kann ich die nicht mit einer Breite von 200px einfügen.

              Ich weiß als weder die Höhe des 1. DIVs, noch die Ausmaße des Logos. Natürlich könnte ich über eine PHP-Funktion die Breite des Logos auslesen und den padding-Wert dementsprechend verändern... aber das wäre dann doch etwas umständlich.

              mfg

              thewho88

              1. ENDLICH! Und der Code ist noch dazu sowas von einfach und flexibel gestaltbar...

                http://www.jakpsatweb.cz/css/css-vertical-center-solution.html