Unwanted spacing between divs inside Html table column - html

Question

I can't get rid of the space between each div I'm presenting in this HTML table, in my "ArticlesBar" column. In this column I have a div for the scroll bar and 3 other divs for header body and date of a news article. Between each of those divs I have a spacing. Any ideas on how to remove it?
This fiddle would help : http://jsfiddle.net/3TseC/
Please check the left column in the fiddle
HTml code:
<table class="homepage_table">
<tr>
<td id="Articlesbar" width="20%">
<div width="20%">
<%#include file="newsData.jsp" %>
</div>
</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 as a Finance and Securities Company,
Imperia Bank converted into a fully fledged commercial bank in January 1996.
Since then the bank has had a long standing tradition of achieving strong financial performance and carrying out
expansion strategies while successfully focusing on efficient client service delivery.<br><br>
Over the last 20 years, Imperia Bank has achieved a sustained growth in our customer deposit base which is largely attributed to the level of confidence our customers have in the bank and our corporate strategy.
Currently we have 23 branches in our expanding branch network across major towns and cities.<br><br>
Imperial Bank will continue to enhance the existing risk management parameters through the effective use of our newly installed and cutting edge core banking system.
As part of our growth strategy, we are also continuing to recruit qualified professional staff, and providing appropriate training to our existing human resources to ensure we continue to meet evolving customer demands.
</div>
</td>
</tr>
</table>
Another html(imported from jsp file, I'm actually using imported data from MySql, but to show the problem I'm using regular text insid div):
<div id= "newsHeader">this is a header</div>
<div id = "newsBody">this is the body</div>
<div id = "newsDate">this is the date</div>
CSS code:
.homepage_table {
border: 250;
width: 100%;
height: 600px;
margin: auto;
}
.homepage_table td {
border: 0;
}
#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 {
height: 50px;
}
#Articlesbar div {
overflow-y: scroll;
height: 100%;
margin: 0;
}
#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;
width: 100%;
height: 20px;
margin: 0;
}
#newsBody {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
color: red;
font-size: 14px;
padding-right: 10px;
padding-left: 10px;
width: 100%;
margin: 0;
height: 20px;
}
#newsDate {
margin: 0;
width: 100%;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
padding-right: 10px;
padding-left: 10px;
height: 20px;
}

Answer 1

Sure no worries
all you need to do if I am right in assuming that you don't want the huge white space between the
<div id= "newsHeader">this is a header</div>
<div id = "newsBody">this is the body</div>
<div id = "newsDate">this is the date</div>
elements is to replace the css selector
#Articlesbar div
with
#Articlesbar > div
This selector means that only the direct descendent of #Articlesbar will gain the attribues of the style.
as it stands the three other divs are having their heights set to 100% as well.
re-re updated fiddle

Answer 2

Your #articlesbar has a height of 50px. And you give all the divs inside that a height of 100% of that, hence the spacing.
I cleared it up a bit, try to start from here again:
http://jsfiddle.net/3TseC/3/
why are you using tables anyway, they just seem to make things more complicated for what you want. I would just setup one div that holds the complete article then if you want add child divs to display headers, content, etc.
Also, use CSS margin like this margin:0px;