How to get Equal Column Height using CSS

How to get Equal Column Height using CSS

Hello friends today we gonna learn about How to get Equal Column Height using CSS. So read this article, How to get Equal Column Height using CSS step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to get Equal Column Height using CSS

Traditionally, a website consists of the main body and a sidebar on the layout. Usually the contents of the main section can be longer than the sidebar, making the height of these two sections unequal.

In some cases we want the height to be the same. There are actually some workarounds for this situation, and one that is often recommended is the Faux column Technic.

back to menu ↑

Faux column

Dan Cederholm first introduced the term Faux Column in his post at A List Apart. The idea of ​​this technique is to create an illusion of equal height by adding a background color or image to the container instead of the sidebar itself.

Okay, let’s take a look at the following example to see how this technique works.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibule in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus mass sem, course sheet semper non, dictum vitae mi. Donec sed bibendum ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.

As you can see, we have three div containing the main part and the sidebar. We also put more (random) content than in the sidebar.

After that, we’ll apply a few styles for the main body and sidebar that appear side by side in the browser, and we’ll also add different background colors to it.

.container {/ * none * /}. main, .sidebar {float: left; padding: 20px;}. main {width: 400px; background-color: LightSlateGrey;}. sidebar {width: 200px; background-color: Tomato;}

This will result in something like the following screenshot shown, as expected height is not equal.

Let’s apply the Faux Column technique; we just remove the background color from the sidebar and add it to the container like so:

.container {background-color: Tomato;}. main, .sidebar {float: left; padding: 20px;}. main {width: 400px; background-color: LightSlateGrey;}. sidebar {width: 200px;}

The height of the sidebar “now looks equal” to the main section.

I am not against this technique. In a certain situation it works just fine. But there is another situation where this illusion will simply fail, such as when you add a margin to the main part. This screenshot below shows how it turns out.

back to menu ↑

CSS table

Alternatively, we can achieve the same result with the CSS table Technic. This technique uses the CSS rendering property to set the HTML elements as a table, and this is my favorite approach when this situation occurs.

Let’s take a look at the following example to see how it works.

The HTML structure is the same as in the example above, except we now change the CSS. We will start by setting the container view as a table. Then we set the .main and .sidebar to show as the table cell and we also need to remove the float declaration from them, otherwise the table cell will just fail too.

.main, .sidebar {float: none; padding: 20px; vertical-align: top;}. container {display: table;}. main {width: 400px; background color: LightSlateGrey; display: table-cell;}. sidebar {width: 200px; display: table-cell; background-color: Tomato;}

As we said, this will produce the same result as shown below. But unlike the Faux Column, this technique does not create an illusion. We just set the div to act as a table. As we may already know, the height of the columns is relative to the tallest.

  • View demo
  • Download source

Do you have any other way to create a similar effect? Share it in the comment box below. We look forward to seeing you tip

back to menu ↑

How to get Equal Column Height using CSS: benefits

  • The How to get Equal Column Height using CSS tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to get Equal Column Height using CSS guide is free.

back to menu ↑

Faq

Tutorial summary of How to get Equal Column Height using CSS

In this guide, we told you about the How to get Equal Column Height using CSS; please read all steps so that you understand How to get Equal Column Height using CSS in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to get Equal Column Height using CSS, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to get Equal Column Height using CSS tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to get Equal Column Height using CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to get Equal Column Height using CSS, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to get Equal Column Height using CSS”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to get Equal Column Height using CSS, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart