nicht angemeldet
Hallo wer kann mir bitte weiterhelfen?
Ich habe eine Div Box in der sich 2 weitere Div Div Boxen nebeneinander befinden. In der linken Box wird eine Grafik und in der rechten Box der dazugehörige Text dargestellt. Das Ganze wurde dynamisch designed, damit bei unterschiedlichen Fensterbreiten und -höhen die Div Boxen entsprechend dargestellt werden. Außerdem wird in den beiden inneren Boxen vertical zentriert, das heißt, dass in der Box wo sich weniger Inhalt befindet die Zentrierung wirksam wird. Die Zentrierung funktioniert nur mit einer festen Angabe der CSS-Anweisung z.B. height:xxxpx;. Aber darduch bin ich nicht mehr dynamisch, wenn bei schmäleren Auflösungen der Text in der Höhe die Grafik überragt.
Gibt es eine Möglichkeit der äußeren Box eine dynamische Höhe zuzuweisen (height:100%; oder height:auto; funktionieren nicht)? Setze ich anstatt der fixen Höhe eine dynamiche Höhe so funktioniert die vertikale Zentrierung des Inhalts nicht mehr (die Dynamik bleibt erhalten). Weiter unten habe ich den Code beigefügt.
Wie könnte ich dieses Problem lösen?
Danke schon mal im voraus für die Unterstützung.
Gruß
Thomas
HTML
<div class="testmain">
<div class="testbild">
<p><img src="testbild.jpg"></p>
</div>
<div class="testtext">
<p>TestText</p>
</div>
</div>
CSS
.testmain {
margin: auto;
width: 90%;
height: 100%;
overflow: hidden;
}
.testbild {
float: left;
width: 35%;
height: 100%;
overflow: hidden;
display: table;
}
.testbild p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.testtext {
float: left;
width: 64%;
height: 100%;
overflow: hidden;
display: table;
}
.testtext p {
display: table-cell;
vertical-align: middle;
}