Member Avatar for FraserM

Hello all,

I'm new to this, so please excuse anything that isn't being done 'right'. I am creating a page that contains 3 sections, spread across the width of my page. The idea is to create 3 separate content areas.

I've created these sections using div elements. The 3 divs have a defined width, but no defined height. The idea is that although the column width is fixed, the page will simply expand downwards to accept whatever is entered.

The trouble i'm having is getting all 3 divs to expand down by the same amount. So for example, I enter 1000 words into the first column, but only 100 in the second and third, all three must expand to the same height. How can this be achieved?

The reason I need them all to expand is their background color, which is different for each column.

  • 1 Contributor
  • 1 Reply
  • 198 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by FraserM

Dani AI

Generated

Nice follow-up by — for readers who land here later: the goal (three side-by-side boxes that always match height while content flows) is best solved with modern layout tools first, and fallbacks only if you must support very old browsers.

A simple, robust flexbox approach (recommended):

<div class="cols">
  <div class="col">Column A</div>
  <div class="col">Column B</div>
  <div class="col">Column C</div>
</div>
.cols { display: flex; align-items: stretch; width: 100%; }
.col  { flex: 1; padding: 1rem; box-sizing: border-box; /* bg on .col */ }

align-items: stretch makes all .col boxes match the tallest column automatically. If you need fixed widths, set flex: 0 0 250px; (or use flex-basis) on each column.

If you need broader compatibility (older IE), display: table / table-cell is a tidy CSS-only fallback:

.cols { display: table; width: 100%; table-layout: fixed; }
.col  { display: table-cell; vertical-align: top; padding: 1rem; }

A small JavaScript fallback can also equalize heights on load/resize when CSS options aren’t viable:

const cols = document.querySelectorAll('.col');
const maxH = Math.max(...Array.from(cols, c => c.offsetHeight));
cols.forEach(c => c.style.height = maxH + 'px');

Troubleshooting notes: use box-sizing: border-box to include padding in widths; don’t rely on height:100% unless the parent has explicit height; for mobile, let columns stack with a media query or flex-wrap. Prefer flexbox/grid today — they keep layout responsive and avoid brittle JS resizing.

Member Avatar for FraserM

The solution to my problem can be found here:

I've tried it and tested it and it works well if anyone else is in a similar position.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.