CSS Table Layout Help

[sirichmond]

Evening all,

Using a table controlled by a stylesheet for some content on my new site but I have another CSS problem. In the left colum are pics and in the right text, when I put the first pic in it forces the text down the page by the heigt of the picture. Any ideas, below is my table CSS and link to page.

http://www.allthegearnoidea.net/V4/diary/0611.html

CSS

#diarymonthtable {
float:left;
width:700px;
overflow:auto;
}
table.diarymonth {
width:700px;
border-collapse: separate;
border-width: 0px;
border-spacing: 10px;
border-style: none;
-moz-border-radius: ;
}
table.diarymonth td {
border-width: 0px;
padding: 10px;
border-style: none;
background-image:url(images/backgrounds/blackbkg.png);
-moz-border-radius: ;
}
td.monthwidth1
{
width:180px;
text-align:center;
}
td.monthwidth2
{
width:440px;
text-align:justify;
}

Thanks in advance

 

[GravyMonster]

Your reset CSS stylesheet is setting vertical-align: baseline on quite a few elements.

To get around this you need to either:

1) Add this line to your CSS

table.diarymonth td { vertical-align: top; }

2) Or better yet, get rid of the tables and use divs.

 

[sirichmond]

thanks for that, so simple. Yeah was using DIV's but could'nt get the layout to work properly so using tables for now and will upgreade when I get my head around it. Wanted the picture colum the same length as the text but it just would not seem to work, been advised to used faux colums so will be looking into these, just needed a cheap fix for now