Einen wunderschönen,
Ich versuche seit Tagen mein Layout nach meinen Vorstellung zu erstellen und bin auf ein Problem gestoßen welches ich nicht lösen, geschweige denn verstehen kann. Hier mal ein abgewandeltes Beispiel von w3Schools.com.
<!DOCTYPE html>
<html>
<head>
<style>
.outerfloating-box {
display: inline-block;
border: 3px solid blue;
}
.floating-box {
display: inline-block;
width: 15%; /*funktioniert so nicht*/
height: 10%; /*funktioniert so nicht*/
overflow:auto;
margin: 10px;
border: 3px solid red;
}
</style>
</head>
<body>
<h2>The New Way - using inline-block</h2>
<div class="outerfloating-box">
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>
</body>
</html>
Wie man sieht versuche ich mit
display: inline-block;
einen Aussenbereich festzulegen in welchem sich wieder 2 inline-blöcke befinden. Nun möchte ich eigentlich, bis zu einem gewissen punkt wo ein @media screen (min-width) auslösen könnte, die Größe der inneren Blöcke durch Prozentangaben für breite und höhe festlegen.
Übersehe ich etwas unglaublich grundlegendes was nirgendwo steht? (Zumnidest habe ich noch nichts gefunden) Ich finde dieses Verhalten nämlich äußerst seltsam da die outerfloating-box sich ohne probleme durch Prozentangaben steuern lässt.
Vielen Dank für Rat und Tat
Gruß
Jo