html tutorial - How to create two div elements with same height side by side in CSS - html5 - html code - html form




Answer: Use the CSS3 flexbox

    With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements, like this:

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <title>Creating Two Equal Height Columns with CSS</title>
      <style type="text/css">
      .flex-container{
          width: 100%;
          min-height: 400px;
          margin: 0 auto;
          display: -webkit-flex; /* Safari */     
          display: flex; /* Standard syntax */
      }
      .flex-container .column{
          padding: 10px;
          background: #dbdfe5;
          -webkit-flex: 1; /* Safari */
          -ms-flex: 1; /* IE 10 */
          flex: 1; /* Standard syntax */
      }
      .flex-container .column.bg-alt{
          background: #b4bac0;
      }
      </style>
      </head>
      <body>
          <div class="flex-container">
              <div class="column">Column 1</div>
              <div class="column bg-alt">Column 2</div>
          </div>
      </body>
      </html>

      Related Searches to How to create two div elements with same height side by side in CSS