Member Avatar for kischi

Hi I'm tryng to make two boxes on my page always the same hight, no matter how much text is inside one of them.

So the boxes will always be the hight of the box with the most text.

you can see what I meen here:

I would wan't the two boxes to be the hight of the one to the left with the most text.

this is my css:

#indexcontent{
background-color:#336699;
border-top:#2175a5 solid 10px;
padding:10px 10px 10px 10px;
display:inline;
position:relative;
width:421px;
float:left;
}

#indexblog {
background-color:#3333FF;
border-top:#2175a5 solid 10px;
padding:10px 10px 10px 10px;
position:relative;
width:421px;
float:left;
margin-left:100px;

I hope you can help, thank you.

  • 4 Contributors
  • 6 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Loved

Dani AI

Generated

Short answer for : you do not need tables or images to force two side-by-side boxes to match height. Modern CSS (Flexbox or Grid) will make both children stretch to the height of the tallest item, without extra scripts in most browsers.

A minimal Flexbox pattern (wrap both boxes inside a parent and let children stretch):

<div class="columns">
  <div class="box">left content</div>
  <div class="box">right content</div>
</div>

.columns {
  display: flex;
  align-items: stretch;  /* makes children equal height */
  gap: 100px;            /* space between boxes */
}
.box {
  flex: 0 0 420px;       /* lock width, or use flex: 1 for fluid columns */
  box-sizing: border-box;
  padding: 10px;
}

CSS Grid gives the same outcome with align-items: stretch on a two-column grid if you prefer that model.

If supporting very old browsers (IE8/9), a small JavaScript fallback that measures the taller column and sets the other column's height will still work — this was the advice mentioned years ago. Use that only when you must support legacy browsers; otherwise Flexbox is simpler and semantic. Avoid using presentation tables as suggested — they harm accessibility and layout flexibility. The faux-background trick mentioned is purely visual and won't help if you need real equal heights for backgrounds, borders, or interactions.

For compatibility and examples see the Flexbox fundamentals on MDN and current support on Can I Use:
MDN Flexbox guide
Can I use: flexbox

Finally, remember responsive behavior: let the layout wrap or switch to a stacked column with a media query instead of forcing fixed widths on narrow screens.

Recommended Answers

All 6 Replies

Member Avatar for Arkinder

This cannot be done with HTML or CSS alone. You will need a scripting language.

Regards, Arkinder

Member Avatar for kischi

oh ok, thx for your quick reply, do you know what scripting language I would need and would you know how, or could you just point me to the correct forum to post the question?

Member Avatar for Arkinder

There are quite a few that can do it, but try the JavaScript forum.

Regards, Arkinder

Member Avatar for MJ Pieterse

if all else fails just create a table and style your td's accordingly.

this will be the easiest solution i think :D

Member Avatar for Arkinder

if all else fails just create a table and style your td's accordingly.

this will be the easiest solution i think :D

Easy, no. Functional, no. Outdated technique from 1996, yes.

Regards, Arkinder

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.