Member Avatar for Pete_UK

Hi,

First post here :)

Basically I have 2 columns, both with different background colours that need to be the same height

Both columns are fluid - they use a percentage of the screen for their width so are not fixed for example the left column is 25% and black and the the right is 75% and grey in colour.

The height of both columns is not declared, leaving it as auto by default - my columns will alter height accordingly to whats inside them.

The content is not dynamic, but when resizing the window or increasing the font size this will of course alter the heights.

What I need is to be able to make which ever column ends up the shortest to match its height to the column thats the deepest.

Basically so that it works like a table does.

Does that make any sense to anyone?

Cheers,

Pete.

  • 3 Contributors
  • 4 Replies
  • 119 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Pete_UK

Dani AI

Generated

For two fluid columns (25%/75%) that must always match height, modern CSS removes the need for layout hacks. correctly noted the table approach as a classic fallback, and called out display-mode tricks — both historically useful. Today the most robust options are CSS Flexbox or Grid; both allow fluid widths and will stretch the shorter column to match the taller one without fixed heights.

A minimal Flexbox pattern (remove floats; make the container the flex parent):

<div class="cols">
  <div class="col left">Left content</div>
  <div class="col right">Right content</div>
</div>

.cols {
  display: flex;
  align-items: stretch;
}
.col.left {
  flex: 0 0 25%;
  background: #000;
  color: #fff;
}
.col.right {
  flex: 1;
  background: #ccc;
}

Grid offers the same behavior with explicit columns if that fits the layout better:

.cols {
  display: grid;
  grid-template-columns: 25% 1fr;
  align-items: stretch;
}

If very old browsers must be supported, a simple JS fallback can equalize heights by measuring and applying min-height, or use the "faux columns" background technique so the visual effect is maintained without matching box heights. Common gotchas: remove floats from the column elements, watch for margin collapse on first/last children, and use box-sizing: border-box when adding padding/borders. For reference, see the MDN guides on Flexbox and Grid: Flexbox basics and Grid layout.

Recommended Answers

All 4 Replies

Member Avatar for MattEvans

Why not use a table? That's what tables do well; that's not what two unrelated elements do well without some javascript hacks.

If you fixed the height on the two columns' mutual container and set both of their heights to 100% it might work... But if you're using floats and/or non-flow positioning to get the side-by-side columns, it probably won't work...

Tables != Evil.

Member Avatar for ¤| battousai |¤

You could also try the display property in css, I haven't tried myself yet but by using it you can make your elements behave like most other elements.

for example display: inline applied to a list will make it behave as an inline element like p

Member Avatar for ¤| battousai |¤

You could also try the display property in css, I haven't tried myself yet but by using it you can make your elements behave like most other elements.

for example display: inline applied to a list will make it behave as an inline element like p or a so the list will be horizontal.

what you can use is display: table, and other table based behaviors to have the boxes behave more like tables.

but be aware that the display property doesn't work in I.E.

Also have a look at for more info on this property

Member Avatar for Pete_UK

Hi all,

I solved the problem :) and it was really simple I got exactly what I wanted with no compromise - and without lame CSS browser hacks.

I'll post it up as soon as I've finished my site.

Pete.

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.