I'm having a very specific issue with my website that I can't seem to come up with an easier solution because the current solution that I'm using is tedious as heck. So I have three columns and each one has an image and a little description of that image underneath. The problem comes when I have to change the height of each individual column.
Currently, I have specified the height of each column and if I decide to add more text underneath the image, I have to manually change the height of the column which can be tedious. I just want to be able to have each column to auto adjust the height automatically and the bottom border should be a straight line. Look at the image to understand what I mean.
Here's the image
http://i44.tinypic.com/2qipv06.jpg
HTML
<article class="in-column" style="height:362px;"> <a href="http://www.yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
<article class="in-column" style="height:374px;"> <a href="http://www.yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
</section>
<section id="middle-container">
<article class="in-column" style="height:377px;"> <a href="http://www.yahoo.com"><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
<article class="in-column" style="height:359px;"> <a href="http://www.yahoo.com"><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
</section>
<section id="right-container" class="right-column" style="width:351px; border-right: 1px solid #dddddd;">
<article class="in-column" style="height:343px;"><a href="http://yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" width="300" height="200"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
<article class="in-column" style="height:393px;"> <a href="http://yahoo.com"> <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300"></a>
<p class="excerpt">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism
</article>
</section>
</section>
CSS
#content .subheading {
color: #657B83;
font-size: 22px;
height:40px;
box-shadow: 0px 2px 4px rgb(204, 204, 204);
padding-top:10px;
position: relative;
margin-bottom: 0px;
}
#content {
overflow: hidden;
width: 1055px;
}
.right-column {
width: 350px;
float: left;
border-left: 1px solid #dddddd;
}
.left-column {
width: 350px;
float: left;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 12px;
margin: 0;
padding-bottom: 5px;
font-family:"Segoe UI";
}
#middle-container {
width: 350px;
float: left;
position: relative;
}