jquery - html table column sizing -

i'm trying create simple html table (one row columns). want 1 column overflow scroll bar. problem no matter css setitngs change column size changes according text, , scroll bar horizontally , not vertically. needs changed in order table way want?

html code:

<table class="homepage_table">     <tr >         <td id="articlesbar" width="20%"  >             <%@include file="newsdata.jsp" %>          </td>           <td id="about_td" width="80%"  >     <div class="fadein">     <img src="imp.gif">   <img src="http://thefinancialbrand.com/wp-content/uploads/2008/08/tagline-tagcloud.gif">   <img src="slogan1.gif">  </div>          <div id="about_text" width="100%" height= "100px" >                      founded in 1992 finance , securities company,                  imperia bank converted fledged commercial bank in january 1996.                  since bank has had long standing tradition of achieving strong financial performance , carrying out                  expansion strategies while focusing on efficient client service delivery.<br><br>                 on last 20 years, imperia bank has achieved sustained growth in our customer deposit base largely attributed level of confidence our customers have in bank , our corporate strategy.                 have 23 branches in our expanding branch network across major towns , cities.<br><br>                 imperial bank continue enhance existing risk management parameters through effective use of our newly installed , cutting edge core banking system.                 part of our growth strategy, continuing recruit qualified professional staff, , providing appropriate training our existing human resources ensure continue meet evolving customer demands.         </div>         </td>     </tr> </table> 

and (imported jsp page):

    <div id= "newsheader"><%=header %></div>     <div id = "newsbody"><%=newsbody %></div>     <div id = "newsdate"><%=date %></div>      <br> 

css code:

.homepage_table { border: 250; width: 100%; height:500px; margin:auto; } .homepage_table td { border:solid;  } #about_td { background-image:url('http://www.promenadd.com/en/wp-content/uploads/2013/04/promenadd_grey_background.jpg'); background-repeat:no-repeat; background-size: 110%; font-family: "avant garde", avantgarde, "century gothic", centurygothic, "applegothic", sans-serif; font-weight:bold;  } #about_text {      padding-right: 50px;     padding-left: 50px;     color:steelblue;   } #articlesbar {   overflow-x: hidden; overflow-y: scroll; }  #newsheader { font-family: "avant garde", avantgarde, "century gothic", centurygothic, "applegothic", sans-serif; color:steelblue; font-weight:bold; font-size: 20px; padding-right: 10px; padding-left: 10px; }  #newsbody { font-family: "avant garde", avantgarde, "century gothic", centurygothic, "applegothic", sans-serif; color:red; font-size: 14px; padding-right: 10px; padding-left: 10px; } #newsdate { font-family: "avant garde", avantgarde, "century gothic", centurygothic, "applegothic", sans-serif; font-size: 14px; padding-right: 10px; padding-left: 10px; } 

i beaten punch looks poster wants scrollbar on articlesbar

so simple method set height on td, add div inside , add scrollbar instead.

the structure

<table>      <tr>         <td>            <div>            </div>         </td>       </tr>  </table> 

here have fiddle