How to solve the problem with the borders of the blocks with an adaptive height using the table?

Blocks 1, 3, 4 have the same height ( adaptive ).
Unit 2 fixed height.
How to impose this, and how to solve the problem with the borders?

42acb8173e1f4c51b8af708c61f71c99.png
July 8th 19 at 11:31
3 answers
July 8th 19 at 11:33
Option 1: https://jsfiddle.net/b62qcp06/
Option 2: https://jsfiddle.net/w5jsb6dg/ (here the difference is that units 3 and 4 taken in a separate block)
I forgot to ask - what's the problem with the borders? - Carole.Durgan commented on July 8th 19 at 11:36
Wowowowow cool : ) but not that. height 1, 3, 4 elements can be different heights!
for example height: 1 - 100px, 2 - 20px, 3 - 80px, 4 - 80px. - Urban66 commented on July 8th 19 at 11:39
You yourself in the question wrote that 1, 3, 4 - height 100%
And block 2 is fixed and does not change.
Now the problem I do not understand))) - Carole.Durgan commented on July 8th 19 at 11:42
: extrusion 1, 3, 4 element is synchronous! - Urban66 commented on July 8th 19 at 11:45
: on the image view and add 500 pixels 1, 3, 4. 500. 100, okay? - Urban66 commented on July 8th 19 at 11:48
July 8th 19 at 11:35
Use flexbox
I don't like flexbox - Carole.Durgan commented on July 8th 19 at 11:38
and if under IE9 ? - Urban66 commented on July 8th 19 at 11:41
July 8th 19 at 11:37
You can try to position the elements: https://jsfiddle.net/slippyk/o2jxeg2z/1/
ham. agility break :) - Carole.Durgan commented on July 8th 19 at 11:40

Find more questions by tags CSS