✔ Problem mit Höhenausrichtung bei 2 nebeneinander liegenden Divs

[chaostheorie]

Hallo zusammen,

ich kämpfe an der Ausrichtung von zwei nebeneinander liegenden Divs. Ich bin mir relativ sicher dass es ne Kleinigkeit ist die nicht stimmt udn ich bloß Tomaten auf den Augen habe, aber ich weiß einfach nicht mehr wonach ich suchen soll.

So sieht der HTML-Code aus:

<div id="footer">
<div class="footer-text-li">
XYZ<br>
Inhaber<br>
Hauptstraße 333<br>
12345 ABC-Stadt
</div>


<div class="footer-text-re">
Kontakt:<br>
Tel.: 01234 / 5 67 89<br>
Fax: 01234 / 5 67 99<br>
eMail: info@XYZ.de
</div>
<div class="clear"></div>

</div>

Und so der Abschnitt im CSS:

#footer
{
clear: both;
position: relative;
bottom: 0;
background-image:url(http://www.imgbox.de/users/nice2cu/footer.jpg);
width:856px;
height:101px;
margin-left:0;
padding-left:30px;
color:#fff;

}


.footer-text-li
{
width:200px;
float:left;
margin-top:10px;
}

.footer-text-re
{
width:270px;
margin-left:200px;
margin-top:10px;

}

Witzigerweise hilft es, im Footer-css die Position auf "absolute" zu setzen, dann stehen die Textfelder auf gleicher Höhe, allerdings klebt dann die Footer-Grafik an ner ganz falschen Stelle.

Mir ist klar dass ich wohl keinen sauberen Code habe da ich mich mit der Materie nicht wirklcih auskenne, daher bin ich für jeden Hinweis dankbar wie es sich verbessern ließe.

Ach ja, Screenshot des Ergebnisses bei obigem Code im Anhang.

Wäre nett wenn mal jemand drüber schauen könnte. Bedanke mich schonmal im Voraus!!
LG Lydia

 

[Maik]

Hi,

vergeß einfach, was ich dir hier zunächst geantwortet hatte, und verwende anstelle der beiden margin-top-Regeln besser padding-top für #footer:

#footer
{
clear: both;
position: relative;
bottom: 0;
background-image:url(http://www.imgbox.de/users/nice2cu/footer.jpg);
width:856px;
height:91px; /* abzüglich 10px für padding-top:10px gemäß dem Box-Modell  */
margin-left:0;
padding-left:30px;
color:#fff;
padding-top:10px;
}

.footer-text-li
{
width:200px;
float:left;
}

.footer-text-re
{
width:270px;
margin-left:200px;
}

mfg Maik

 

[chaostheorie]

Bestens, perfekt, mit dem 2. Tip geht es!! Der erste hat nämlich nichts gebracht, hilft mir aber an einer anderen Stelle (hoffentlich) weiter, und wenn nicht melde ich mich nochmal

Vielen Dank!

 

[Maik]

Sorry für die erste Fehlinfo :-(

Die ist mir unter dem Eindruck einer mächtigen Bärenhungerattacke entglitten - hab aber glücklicherweise noch die Kurve gekriegt, bevor ich mich zum Abendmahl zurückgezogen habe ;-)

mfg Maik