make all divs same height code example

Example 1: same height div css

################ HTML ########################
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

################# CSS ########################
.row {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5%;
}

.col {
  border: solid;
}

Example 2: how to make all div same height

<html>
	<head>
    	<title>Web page</title>
    </head>
    <body>
    	<div id="divContainer">
          <div id="divOne">
          	<p>Paragraph 1</p>
            <p>Another Paragraph</p>
          </div>
          <div id="divTwo">
          	<p>Paragraph 2</p>
          </div>
        </div>
    </body>
    <style>
    	#divContainer {
        	display: flex;
        }
        #divOne {
        	background-color: red;
        }
        #divTwo {
        	background-color: blue;
        }
    </style>
</html>

Example 3: css how to make a elements of same type start at same height

CSS:
.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
HTML:
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Tags:

Misc Example

Recent Posts