Question posted in 
I have a problem with my display of two columns in my HTML code.
Top part of the two columns:
Space on the 1st column, the paragraph on the 2nd column was pushed down due to the image:
Here’s my HTML code below
document.addEventListener('DOMContentLoaded', () => {
const column1 = document.getElementById('column1');
const column2 = document.getElementById('column2');
const image = column2.querySelector('img');
const paragraphs = Array.from(column1.querySelectorAll('p'));
const distributeParagraphs = () => {
column2.innerHTML = '';
column2.appendChild(image);
let column1Height = column1.offsetHeight;
let column2Height = image.offsetHeight;
paragraphs.forEach(paragraph => {
column1.appendChild(paragraph);
});
while (Math.abs(column1Height - column2Height) > paragraphs[0].offsetHeight && paragraphs.length > 0) {
const lastParagraph = paragraphs.pop();
column2.appendChild(lastParagraph);
column1Height -= lastParagraph.offsetHeight;
column2Height += lastParagraph.offsetHeight;
}
};
window.addEventListener('resize', distributeParagraphs);
distributeParagraphs();
});body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
}
.column {
width: 50%;
flex: 1;
padding: 10px;
box-sizing: border-box;
}
#column1,
#column2 {
width: 50%;
}
img {
display: block;
max-width: 100%;
height: auto;
}<div class="container">
<div class="column" id="column1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.</p>
<p>Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.</p>
<p>Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.</p>
<!-- Add more paragraphs as needed -->
</div>
<div class="column" id="column2">
<!--img src="uploadssample_640×426.jpg" alt="Event Image"-->
<img src="https://picsum.photos/seed/picsum/640/426" alt="Event Image">
</div>
</div>I tried to update the Javascript but the problem still persist. I want to get rid of the space at the bottom of the 1st column. I want the paragraphs to be distributed properly, regardless of the size of the images.
3
Answers
You can not completely remove the white space because it is due to the image and content in both columns, which needs to be equal if you want them same same size, besides you can vertically center the left side column paragraph by applying align-items: center; to the align-items: center; to the class "container",
It is not possible (absent javascript) to equalize the content of two elements to equalise the heights of adjacent columns such as you demonstrated.
Flexbox will equalise the heights of the columns but will not move content from one to the other to do so. It merely sets the height of the shortest to the same as the tallest.
What you appear to seek is
css columnsusingcolumn-count. It takes a single element and breaks the content into the desired number of columns. A styling issue, not a structural one.Did you know CSS can create columns automatically?