Equal size columns code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Equal size columns</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box"> <div class="box-row"> <div class="box-cell box1"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim cumque accusamus nemo, amet consectetur quaerat, molestiae provident laborum tempora autem velit, voluptates nulla esse maxime tempore repellat. Adipisci, impedit eveniet. </div> <div class="box-cell box2"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, eligendi? Vitae delectus natus labore. Ab iste hic libero, earum facilis culpa dolor quia vero, blanditiis architecto dolores nisi, quisquam ratione? </div> </div> </div> </div> </body> </html>
2. style.css:
body { background: rgb(217,255,0); margin: 0; padding: 0; } .container .box { width: 600px; margin: 140px auto; background: rgb(0,0,0); display: table; } .container .box .box-row { display: table-row; } .container .box .box-row .box-cell { display: table-cell; width: 50%; padding: 20px; font-family: Arial, Helvetica, sans-serif; } .container .box .box-row .box-cell.box1 { background: rgb(97,191,207); } .container .box .box-row .box-cell.box2 { background: rgb(74,255,2); }
