Hallo, ich möchte eine responsive Tabelle machen, die links zwei boxen mit etwas Abstand dazwischen übereinander hat (40% Breite) und rechts eine große, die die gleiche Größe hat wie die linken zusammen (60% Breite) (siehe Anhang).
Bis z.B. 800px Seitenbreite sollen die enthaltenen Bilder kleiner werden, unter 800px sollen die beiden linken Boxen unter die rechte rutschen.
Da ich das nicht hinbekommen hab, hab ich das hier mal ausprobiert.
<div class="box-layout linke-box">
<h1>links große box</h1>
</div>
<div class="box-layout rechte-box rechte-box-erste">
<h1>rechts erste box</h1>
</div>
<div class="box-layout rechte-box rechte-box-zweite">
<h1>rechts zweite box</h1>
</div>
.box-layout {
display: inline-block;
width: 40%;
float: left;
outline: 1px solid #C3C3C3;
padding: 10px 20px;
margin: 0 10px;
background-color: #F0F0F0;
min-width: 420px;
}
.linke-box {
min-height: 440px;
}
leider gelingt es mir nicht, das ganze horizontal zu spiegeln und das noch responsiv zu machen.
Kann mir bitte jemand helfen?
LG
Tanja