Struggling with my HTML and CSS code, I need a way to structure nested DIV blocks into a responsive grid where each block has the same width. Despite my efforts, nothing seems to work as expected. Currently, the nested DIVs are stacked vertically one on top of the other. My goal is to make these blocks wrap when the browser window is resized, ensuring equal width for each DIV. While my code may not be visually appealing, it served its purpose in creating the current layout.
I attempted using flex and flex-wrap properties to form a grid but encountered display issues with the nested DIV blocks.
<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
width: 100%;
height: auto;
border: 15px solid Green;
box-sizing: border-box;
background-color: Aquamarine;
margin: auto;
text-align: center;
}
.list_1 {
width: 30%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: Grey;
display: inline-block;
}
.list_subtext {
text-align: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
font-size: 10px;
}
hr {
color: solid black;
width: 75%;
text-align: center;
}
.list_2 {
width: 85%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: White;
display: inline-block;
}
.div_list_1 {
display: list-item;
list-style-type: disc;
list-style-position: outside;
text-align: left;
}
</style>
<title>Test</title>
</head>
<body>
<div class="border_box_main">
<hr><br>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<hr><br>
</div>
</body>
</html>
Currently, my nested DIV blocks appear in a vertical list with consistent width. However, I want them to flow horizontally while maintaining equal width and centered position on the screen. Additionally, I need them to adapt responsively to changes in the browser window size.
UPDATE: View my JSFiddle link here https://jsfiddle.net/g42nxk0p/. Notice that under small window sizes, my HTML doesn't render correctly—the borders fail to shrink accordingly. I aim to address this issue as well.