Possible Solutions for Improper Height Issue In Web Designing

Here's What you'll Learn

Creating a picture perfect design is an important fact to attract the user and the client. Every designer have to deal with this improper height issue in designing, especially while working on ecommerce development projects.

In this article let us discuss in detail about the possible methods to solve height issue in your design with examples.

Solution 1: Solving equal height with table cell property

This is the old and simple way to solve equal height problem. But nowadays used less because of many available new practices. By using CSS properties table, table-row, & table-cell we can set the equal height.

Here we have used “vertical-align: middle” property for content alignment. And for mobile responsiveness, we must add display property value using display: block for device friendliness.

STEP 1: Basic HTML code for section creation

<div class="inner_height_div"><!--parent div -->
     <div class="inner_equal_hight_div" style="background: red;"> <!--child div -->
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</</p>
     </div>
     <div class="inner_equal_hight_div" style="background: green;"> <!--child div -->
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</</p>
     </div>
     <div class="inner_equal_hight_div" style="background: black;"> <!--child div -->
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
     </div>
</div>

STEP 2: CSS to set equal height using properties

Assigned “display:table” property for parent div and for child classes “display:table-cell” is used.

CSS Code

.inner_height_div{
    display: table;
   width: 100%;
    text-align: center;
}
.inner_equal_hight_div
{
  display: table-cell;
  padding: 15px;
  color: #fff;
  width: 33.3%;
  vertical-align: middle;
  text-align: left;
}
@media only screen and (max-width: 767px){
  .inner_equal_hight_div{display: block;width: 100%;}
}

Even though the display:table result is quick but some CSS limitations will be there. Like colspan/rowsapan equivalents, and CSS cell expansion based on content height and width.

Solution 2: Solving equal height using margin and padding

By using the margin and padding properties, we can set equal height of the columns. Assign some values to padding and the same value for margin as well but in negative numbers.

And for mobile responsiveness, we have to set padding and margin value to “0” for better result. For content alignment vertical align middle is not supported in this method.

STEP 1: Basic HTML code for section creation

<div class="container1"><!--parent div -->
       	 <div class="column" style='background: red'><!--child div -->
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         </div>
         <div class="column" style='background: green'><!--child div -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
         <div class="column" style='background: blue'><!--child div -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
         </div>
</div>

STEP 2: Padding and margin value usage

We have used “overflow:hidden” property for parent div, which specifies the condition what if the content overflows an element’s box. And also explains whether to clip content or to add scrollbars when it overflows in specified area. For child div margin and padding properties are used.

And for mobile responsiveness, we have to set padding and margin value to “0” for better result.

CSS Code

.container1 {
    overflow: hidden;
}
.column {
    width: 33.3%;
    float: left;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
    color: #fff;
}
.column p
{
  padding: 15px;
}
@media only screen and (max-width: 767px)
{
  .column
  {
    width: 100%;
  }
}

Solution 3: Solving equal height using flexbox concept

STEP 1: Basic HTML code for section creation

<div class="inner_flex_box"><!--parent div -->
              	<div class="box" style="background: green"><!--child div -->
                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         	</div>
           	<div class="box" style="background: black"><!--child div -->
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          	</div>
            	<div class="box" style="background: red;"> <!--child div -->
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</p>
           	</div>
</div>

STEP 2: Flexbox creation to solve equal height issue

Using display: flex; property, we have created a flexbox container and added it to an ul elements for child elements control. Also we have added Flex-wrap, so that the items in the container list will move to new row when it is runs out of horizontal space instead of pushing all elements as one row.

CSS Code

.inner_flex_box
{
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  color: #fff;
} 
.box
{
  width: 33.3%;
  padding: 15px;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
} 
@media only screen and (max-width: 767px){
  .inner_flex_box
  {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }
  .box
  {
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      width: 100%;
  }
}

Solution 4: Solving equal height using grid concept

STEP 1: Basic HTML code for section creation

<div class="container"><!--parent div -->
                <div class="element"> <!--child div -->
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
         	<div class="element"> <!--child div -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
         	</div>
                <div class="element"> <!--child div -->
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
               </div>
               <div class="element"> <!--child div -->
               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
               </div>
               <div class="element"> <!--child div -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</p>
               </div>
</div>

STEP 2: Grid implementation to solve equal height issue

Here we have created a grid using “display: grid” with equal height rows and the height will be set based on tallest cell in the grid for all rows. And using “grid-gap “created space between the inner columns.

CSS Code

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.element {
  border: 2px solid #000;
  padding: 15px;
  display: grid;
  align-items: center;
}

We have worked on grid with three columns using “grid-template-columns: repeat(3, 1fr);”. If your design need more columns just add the no of columns needed. Do try our sample code and enhance your web design skills.