Hallo
Ich erstelle aktuell eine Webseite für mein Unternehmen und arbeite aktuell an einer Produktseite. Diese Seite beinhaltet 2 divs, Das eine enthält ein Bild, das andere eine Produktbeschreibung. Beide divs werden von einem weiterem div auf Abstand gehalten werden. Um beide divs liegt ein weiters. Diese divs habe ich mit text-aleign: center in der Mitte zentriert. Jetzt habe ich aber das Problem, dass beide Divs nicht an ihrer Oberkante abschließen, sondern an ihrer Unterkannte, was dazu führt, dass immer das div mit weniger Inhalt nach unten rutscht (Siehe Foto). Beide divs sollen sich so platzieren, wie sie es jetzt schon tuen, aber oben an der gleichen stelle miteinander abschließen und nicht untenKann mir jemand hefen und mir sagen, was man dagegen machen kann?
html-seminar.de/woltlab/attachment/2294/
html Code:
<div class="umrandunglr" >
<div class="umranbild">
<img src="../IMG/Stairville%20flood%20panel.jpg" class="bilddetails5" >
</div>
<div id="abstand">
</div>
<div class="umrantext">
<h3>Stairville LED Flood Panel</h3>
<br>
<br>
<table id="detailstabelle">
<tr>
<th>Abstrahlwinkel</th>
<th>40°</th>
</tr>
<tr>
<th>Leistung</th>
<th>18w</th>
</tr>
<tr>
<th>Abmessungen (L x B x H)</th>
<th>260 x 68 x 210 mm</th>
</tr>
<tr>
<th>Gewicht</th>
<th>1,4 Kg</th>
</tr>
<tr>
<th>DMX fähig</th>
<th>Ja</th>
</tr>
<tr>
<th>Im Lieferumfang enthalten</th>
<th>1x Manfrotto Klemme, 1x Safety, <br> Kein Case vorhanden</th>
</tr>
<tr>
<th>Verfügbare Geräte</th>
<th>8 </th>
</tr>
<tr>
<th>Preis/Tag</th>
<th>4€</th>
</tr>
</table>
<br>
<h5>Hier gehts zur <a href="https://images.thomann.de/pics/atg/atgdata/document/manual/253358_c_253358_253359_v2_de_online.pdf" target="_blank" >Gebrauchsanweisung</a></h5>
</div>
</div>
Alles anzeigen
CSS Code:
.umrandunglr{
text-align: center;
width: 100%;
}
.umranbild, .umrantext, #abstand{
border: solid;
display : inline-block;
}
.umranbild{
background-color: aqua;
width: 32%;
min-width: 400px
}
.umrantext{
background-color: aquamarine
}
.bilddetails5{
width: 60%
}
#detailstabelle{
text-align: left;
border-spacing: 10px;
border-collapse: separate
}
.umrantext h5{
margin-top: 75px;
font-size: 90%;
font-weight: 500
}
#abstand{
width: 20px
}
Alles anzeigen