Left block with 2s overflowing with text and resizing. But right blocks don't. I want to make blocks with 4s and 5s automatically resize to the top of the block with 7s. How can I do this?
I want to keep a table-like design with any amount of text or any size.
No grid or flexbox allowed
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header"><div class="cell block">
11 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 111111 1 11 1111 1 1 1111
</div></div>
<div class="body">
<div class="cell left block">
222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 2222222222222
222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 2222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222222 22 2222222 22222222 222222222 222222222222222 222222 22222222
</div>
<div class="cell">
<div class="table top block">3333 33333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 33333333333 3333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 33333333333 3333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 33333333333 3333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 33333333333 3333 3333 3 333333</div>
<div class="row">
<div class="cell">
<div class="row"><div class="cell middle block">444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 4444444444 4444 </div></div>
<div class="row"><div class="cell bottom block">6 6666 6 66 66666 666 6 6666 6 66 66666 666 6 6666 6 66 66666 666 666</div></div>
</div>
<div class="cell right block">5555 555 5 55 55555555 555 5 55 55555555 555 5 55 55555555 555 5 55 5555</div>
</div>
</div>
</div>
<div class="footer"><div class="cell block">
77 7 7 7777 777 7777 77 7 7 7777 777 7777 77 7 7 7777 777 7777 777
</div></div>
</body>
</html>
CSS:
body{
border: 1px solid #000;
display: table;
}
.header{
display: table-header-group;
background-color: lightblue;
height: 15vh;
}
.footer{
display: table-footer-group;
background-color: lightblue;
height: 15vh;
}
.rowgroup{
display: table-row-group;
}
.cell{
display: table-cell;
}
.row{
display: table-row;
}
.caption{
display: table-caption;
}
.left{
background-color: peachpuff;
height: fit-content;
min-height: 70vh;
width: 25vw;
/*overflow-wrap: break-word;*/
}
.top{
background-color: lightgreen;
height: fit-content;
min-height: 10vh;
/*overflow-wrap: break-word;*/
}
.right{
background-color: peachpuff;
height: fit-content;
min-height: 60vh;
width: 25vw;
}
.bottom{
background-color: lightgreen;
height: fit-content;
min-height: 10vh;
}
.middle{
background-color: whitesmoke;
height: fit-content;
min-height: 50vh;
}
.block{
padding: 2vh;
}
StackOverflow wants me to add some details, but I already upload an image.
You need to add diplay: flex.
also, for the CSS part, you'll need to change your min-height or create a class specific for the box of 6s.
I hope that helps. Also, I'm not sure what you're building, but I suggest you take a look at HTML tables. Good luck!