Ich habe hier einen HTML-Code
Code
<div class="buchungsinfo_rahmen">
<div class="buchungsinfo_kopf"><img src="ok.png" width="50px" alt="" style="float: right;" />
<p>Ihre Buchungsinformationen:</p>
</div>
<div class="buchungsinfo_body">
<p>Preis pro Teilnehmer: 320,00 EUR</p>
</div>
<div class="buchungsinfo_preis">
<p>25,00 EUR</p>
</div>
</div>Dazugehörig ist diese CSS:
CSS
.buchungsinfo_rahmen {
background-color: #ddd !important;
border: 1px dotted black;
padding: 10px;
height: auto;
}
.buchungsinfo_kopf {
text-align: left;
background-color: #ff6138;
color: #fff;
padding: 5px 10px 5px 5px;
font-size: 1em;
}
.buchungsinfo_body {
background-color: #eee;
padding: 10px;
font-size: 0.8em !important;
width: 80%;
float:left;
}
.buchungsinfo_preis {
background-color: #eee;
padding: 10px;
font-size: 0.8em !important;
width: 15%;
float:right;
text-align:right
}
Mein Problem ist, dass außen herum um alle DIVs ein Rahmen definiert ist, der normalerweise in der Höhe auto ist.
Das funktioniert auch soweit, bis ich bei
.buchungsinfo_body und .buchungsinfo_preis
ein float: left; setze, damit die beiden Felder nebeneinander sind. Im Ergebnis bleibt nur das DIV mit der Klasse .buchungsinfo_kopf vom Rahmen eingefasst. Die anderen DIVs liegen dann außerhalb des Rahmens. Wo ist mein Fehler? Hat jemand eine Idee?
Danke für Eure Hilfe.
