css elements same height code example
Example 1: 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 2: make three column with equal height using flexbox
.pseudo-three-col {
position: relative;
background: #eee;
z-index: 1;
width: 100%;
}
.pseudo-three-col .col {
position: relative;
width: 27%;
padding: 3%;
float: left;
}
.pseudo-three-col .col:nth-child(1) { left: 33%; border:solid black }
.pseudo-three-col .col:nth-child(2) { left: -33.3%; }
.pseudo-three-col .col:nth-child(3) { left: 0; }
.pseudo-three-col:before, .pseudo-three-col:after {
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: 33.4%;
width: 33.4%;
height: 100%;
background: #ccc;
}
.pseudo-three-col:after {
left: 66.667%;
background: #eee;
}