I am facing an issue with the variable height of my div, causing it to position incorrectly.
To demonstrate the problem, I have included a code snippet below.
Here is the solution I am seeking:
https://i.sstatic.net/XMAMr.png
Note: Since the div has a variable height, I cannot remove the min-width property.
I wish to make it responsive so that it adapts to different devices with varying column layouts. Therefore, the traditional HTML class hierarchy method will not work for me.
Row
Column
Column
Row
Column
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="min-height: 400px; background:#bfaeae; border: 1px dotted;">
<h2>Column 1</h2>
</div>
<div class="column" style="min-height: 200px; background:#bfaeae; border: 1px dotted;">
<h2>Column 2</h2>
</div>
<div class="column" style="min-height: 200px; background:#bfaeae; border: 1px dotted;">
<h2>Column 3</h2>
</div>
</div>
</body>
</html>