Trying to do the following: two blocks of fixed width. The third is rubber and takes up the rest of the width. Inside it are three blocks with contents, which also occupies the entire width of this block, and the contents inside are aligned in the center vertically and horizontally.

enter image description here

But not very good. What's wrong?

div { border: 1px solid gray; } #container { width: 750px; height: 500px; } #first, #second, #third, #third-one, #third-two, #third-three { min-height: 100px; margin: 10px; } #first, #second { width: 250px; float: left; height: 500px; } #second:after { content: ""; display: table; clear: both; } #third { float: left; } 
 <div id='container'> <div id='first'>first</div> <div id='second'>second</div> <div id='third'> <div id='third-one'>third-one</div> <div id='third-two'>third-two</div> <div id='third-three'>third-three</div> </div> </div>

  • look flex. - Andrey Fedorov

1 answer 1

 div { border: 1px solid gray; } #container { width: 750px; overflow: hidden; } #first, #second, #third, #third-one, #third-two, #third-three { min-height: 100px; margin: 10px; } #third-one, #third-two, #third-three { position: relative; } #third-one > span, #third-two > span, #third-three > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #first, #second { width: 250px; float: left; height: 500px; } #second:after { content: ""; display: table; clear: both; } #third { overflow: hidden; } 
 <div id="container"> <div id="first">first</div> <div id="second">second</div> <div id="third"> <div id="third-one"><span>third-one</span></div> <div id="third-two"><span>third-two</span></div> <div id="third-three"><span>third-three</span></div> </div> </div>

  • Thanks for the answer! - n.osennij
  • one
    @ n.osennij updated, added alignment - webDev_