I'm currently working on a <div> layout that I need to split into rows. The challenge is creating a design that is fluid and can adapt to various screen sizes, including mobile devices. While using an HTML table might be a quick fix, it's not the ideal solution for responsiveness.
In the "What I want" section of the image, my goal is for columns ONE and SEVEN to automatically adjust their height to match the combined height of rows THREE through SIX. Columns ONE and SEVEN will remain empty, while rows THREE, FIVE, and SIX will contain text of different lengths, and row FOUR will feature an image with dimensions set to width: 1020px and height: 1024px.
The total width occupied by rows Three through Six should be 80% of the screen width, whereas columns ONE and SEVEN should each occupy 10% of the screen width.
I am currently utilizing bootstrap 3.3.6. Here is the code snippet along with the corresponding CSS code for the "what I'm getting" part of the image:
https://i.stack.imgur.com/iSbfC.jpg
.wrapper {
width: 100%;
height: 100%;
}
.one {
display: inline-block;
width: 10%;
height: 100%;
background: blue;
}
.two {
display: inline-block;
width: 80%;
height: auto;
}
.three {
width: 80%;
height: auto;
background: orange;
}
.four {
width: 80%;
height: auto;
background: purple;
}
.five {
width: 80%;
height: auto;
background: yellow;
}
.six {
width: 80%;
height: auto;
background: green;
}
.seven {
display: inline;
width: 10%;
height: 100%;
background: red;
}<div class="wrapper container-fluid">
<div class="one">ONE</div>
<div class="two">
<div class="three">THREE</div>
<div class="four">FOUR</div>
<div class="five">FIVE</div>
<div class="six">SIX</div>
</div>
<div class="seven">SEVEN</div>
</div>