Suggestion:
@Miro, have you considered giving CSS Flexbox layout a try? It can be really helpful for your needs, although it's important to note that it only works in modern browsers.
Exploring CSS Flexbox
CSS Flexible Box Layout Model, known as "flexbox," is a key feature of the CSS3 specification. It allows for efficient element arrangement on a webpage, ensuring consistent display across various screen sizes and devices
. In many cases, flexbox offers advantages over the traditional block model by eliminating float usage and avoiding margin collapsing between container and content elements
.
Here's an example implementation:
HTML Structure
<div class="box">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
Style Sheet
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.box {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: flex-start;
}
.box div.A {
order:1;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
.box div.B {
order:2;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
.box div.C {
order:2;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
Check out the live demo
This resource link might also provide additional help.