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

Topic: HTML / CSS« Prev|Next »

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:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>Creating Two Equal Height Columns with CSS</title>
  • <style type="text/css">
  • .flex-container{
  •     width: 80%;
  •     min-height: 300px;
  •     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 FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.