Make DIV tags even

How do I get this DIV to start at the same height i.e when you delete content e.g the paragraph on title 2, the DIV becomes misplaced (start at different heights} thanks

.holder {
  width: 100%;
  vertical-align: middle;
  text-align: center;
}
.box {
  display: inline-block;
  width: 400px;
  height: 400px;
  margin: 15px 15px;
  border: 1px solid #333;
}
<div class="holder">
  <div class="box">
    <h4>title 1</h4>
    <p>
      This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers
    </p>
  </div>
  <div class="box">
    <h4>title 2</h4>
    <p>
      This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers
    </p>
  </div>
</div>

Answers 1

  • max-height and vertical-align: top ; will help you.

    The main reason why vertical-align: top works is because it is applied to an inline block element. If the display on .box was just block it wouldn't work.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>height</title>
    	<script src="jquery.js"></script>
    	<script>
    		$(function(){
    			
    		})
    	</script>
    	<style>
    		.holder {
    		  width: 100%;
    		  vertical-align: top;
    		  text-align: center;
    		}
    		.box {
    		  display: inline-block;
    		  width: 40%;
    		 min-height: 400px;
    		  margin: 15px 15px;
    		  border: 1px solid #333;
    		  vertical-align: top;
    		}
    	</style>
    </head>
    <body>
    	<div class="holder">
    	  <div class="box">
    	    <h4>title 1</h4>
    	    <p>
    	      This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers
    	    </p>
    	  </div>
    	  <div class="box">
    	    <h4>title 2</h4>
    	    <p>
    	     
    	    </p>
    	  </div>
    	</div>
    </body>
    </html>


Related Articles