Bild und Textbox nebeneinander vertikal ausrichten

[hansjo]

Hallo zusammen,

ich stehe irgendwie auf dem Schlauch und vermutlich ist mein Problem tivial ... aber ich habe keine passende Lösung gefunden:

Ich möchte neben einem img-Element eine Textbox (per div) gleicher Höhe mit anderer Hintergrundfarbe haben.

dazu schreiben ich folgendes:

Code: Alles auswählen

#textBox {
background: #A6ACA8;
margin:0 0 0 5px;
padding:130px 200px 0 20px;
display: inline;
}
...
<img src="bild.jpg" height="150" />
<div id="textBox">
Text
</div>

Nur leider hängt die Textbox nun ein paar pixel tiefer als das Bild

Wie schaffe ich es, dass beides genau auf einer Höhe liegt ... habe einiges versucht, nur leider ohne jeden Erfolg.

Leider darf ich (warum auch immer?) keine URL posten. Aber was ich meine sieht man unter stb-heesen de /demo (bitte URL selber zusammenbasteln)

Danke!

[sejuma]

Versuch's mal so und gib der #textBox zusätzlich noch einen margin-left-Wert entsprechend der Bildbreite:

.left {float: left;}

#textBox {
background: #A6ACA8;
margin:0 0 0 5px;
padding:130px 200px 0 20px;
}
...
<img class="left" src="bild.jpg" height="150" />
<div id="textBox">
Text
</div>

http://www.ohne-css.gehts-gar.net/0019.php

[hansjo]

Danke für die Antwort, aber der Vorschlag hat nicht die gewünschte Wirkung Währen ich mal den geposteten Link (danke dafür!) durcharbeite sind weitere Vorschläge willkommen ...

[djheke]

Auch wenn du mit deiner Variante Probleme bekommen wirst, aber egal.

Code: Alles auswählen

* {
padding:0;
margin:0;
}

.left {
float: left;
margin-left:10px;
}

p {
padding:110px 20px 10px 10px;
}
#textBox {
margin:10px 10px 10px 130px;
background: #A6ACA8;
min-height:150px;
width:250px;
}



<img class="left" src="bild.jpg" height="150">
<div id="textBox">
<p>Text</p>
</div>


[hansjo]

jo - danke djheke! Die Lösung kommt dem was ich brauche an nächsten (... zumindest in den meisten Browsern nicht aber im IE den man leider nicht ignorieren kann...)

Wie macht man denn nun sowas richtig? ist das so schwer?

Auch wenn es in diesem Forum vielleicht nicht gut ankommt, aber ich glaube ich versuchs dann doch mit einer Tabelen

[djheke]

Tabellen brauchst du nicht.

Versuch's mal so

Code: Alles auswählen

* {
  padding:0;
  margin:0px;
}

.bildbox {
margin:10px;
overflow:hidden;
width:300px; /* oder 100% wenn die Box in einer anderen Box (content)  liegt */
background:#aaa;
position:relative;
}

.bildbox img {
display:block;
float:left;
border-right:5px solid #fff;
}

p.textbox {
position:absolute;
bottom:20px;
left:110px;
}


Welchen IE meinst du ?

[hansjo]

hm .. also damit wird das img über die ganze Breite gezogen. (oder wie soll die zugehörige html-notation aussehen?).

Ich test immer im IE7 und 8 (anderen hab ich spontan nicht zur Hahnd)
... mit tabellen gehts übrigens auch nicht so einfach

[djheke]

IE'S kann ich zur Zeit nicht Testen. Dann notiere noch folgndes hinzu
.bildbox img {
width:200px; oder
height:150px;
}

So sollte es funktionieren.