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:
Code
- .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.