CODEWITHSUNDEEP
htmlheight
John
John

Reputation: 177

Auto adjust height of content

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; 

 }

Upvotes: 0

Views: 843

Answers (2)

philip
philip

Reputation: 206

Wrap each </article> element with a div that is your set height and then make the </article> elements height 100%.

That way each </article> is the height you want it to be and everything in it will be 100%.

See this fiddle as example.

Upvotes: 1

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

If you are looking for a quick fix, try display:table and display:table-cell. But this has issues with IE 7. Check this Fiddle for a working demo.

http://jsfiddle.net/LzcJx/

Also have a look at this link to do it without any cross browser issues.

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

Upvotes: 1

Related Questions