Monday, April 8, 2013

Web Design: Equal Column Height With CSS

Ttraditionally, a website consists of the main section and a sidebar on the layout. Commonly, the content that is contained in the main section could be longer than the sidebar, which makes the height of these two sections unequal.



In some cases, we want the height to be equal. There are actually some solutions to this situation, and one that is frequently recommended is the Faux Column technique.



Faux Column


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


Alright, let’s see the following example to see how this technique works.



<div class="container clearfix">
<div class="main">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. Vestibulum in ipsum nulla. Aenean erat elit,
lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,
dictum vitae mi. Donec sed bibendum ante.</div>

<div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.</div>
</div>

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


Afterward, we apply a few styles for the main section and the sidebar to be displayed side by side in the browser and we also add different background colors to them.



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

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



Let’s apply the Faux Column technique; we simply 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 sidebar height now “looks equal” to the main section.



I’m not against this technique. In particular situation it just works fine. But there are some other situation when this illusion will just fail, such as when add a margin to the main section. This screenshot below shows how it turns out.



CSS Table


Alternatively, we can achieve the same result using the CSS Table technique. This technique uses CSS display property to set the HTML elements to act like a table, and this is my favourite approach when this situation rises.


Let’s see the following example to see how it works.


The HTML sturcture is the same as the above example, only we now alter the CSS. We start off by setting the container display to be a table. Then, we set the .main and .sidebar to display as the table-cell and we also need to remove the float declaration from them, otherwise the table-cell will simply fail as well.



.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 mentioned, this will output the same result as shown below. But, unlike the Faux Column, this technique does not deliver an illusion. We just set the div to act like a table. As we may already knew, the columns height is relative to the tallest.



Do you have another way to create similar effect? Do share it in the comment box below. We would love to see your tip.





Web Design: Equal Column Height With CSS

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.