How to get 2 adjacent DIVs have same Height?

HTML & CSS
1

Hi all,

Have tough CSS questions: How to get 2 adjacent DIVs have same Height?
So we have 2 DIVs next to each other which are display: inline-block;
These DIVs have different number of inner DIVs at different sizes.
Is there a CSS method to force these 2 main adjacent DIVs have the same height? Across browsers?
You can see the page in question here:
https://www.anoox.com/paid/buy_adv.php?adv_type=ppc

the DIVs in question are those 2 at the top of the page which are:
#abs_top_left
#abs_top_right

FYI, for now we are using a Hack to make these DIVs to have same height, based on tweeking the various padding and margin values. which tweek of course does not work fully under IE.
So looking for a real CSS based solution, if there is one.

Thanks,
Dean

2

Look into flexbox :slight_smile: . There are many examples of flexbox, but that seems to be a great solution.

3 Likes
3

Yes, looked into flexbox but did not find a solution based on it. Actually it made things worse.

4

I must be doing something wtong then. :shifty:

Different length content, same height.

4 Likes
5

I tried your suggestion, and it is not working. It is close, but they are not Exactly same height.
As you can see on this test page:
https://www.anoox.com/paid/buy_adv_tzt.php

6

You could give the parent div display:table, and then give the two divs you want to make the same height display:table-cell.

This will give them the same height (i tested in DevTools on the page you gave and it worked)

2 Likes
7

Yes it does, if you give “abs_top_left” a background-color too it will show the same height. :slightly_smiling_face:

The table suggestion @Divuni gave will work the same here, though the flexbox suggestion @SamA74 gave will give you more options to align and distribute the two left and right boxes.

2 Likes
8

If you are talking about the 1px difference between the red and the blue boxes then that’s because you have a 1px white border on the bottom of the advertising text. you can remove it like this:

.abs_top_items:last-child{border-bottom:none;}

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.