i have 3 td columns. When I placed an image in the 1st , the 2nd and 3rd td dropped down. (There is only text in the 2nd and 3rd td). They worked fine until I included an image file in the 1st td.
Can you tell me how to fix it?
thanks. I want all 3 columns' items to vertically align at top of each tab cell.
BTW I'm using html5 and CSS3.
links, just in case:
http://www.frankfordfriendsschool.org/index-mar17a.html
http://www.frankfordfriendsschool.org/mainstyleMARCH17a.css
below is the affected coding in html file:
<!-- 3 columns start here -->
<article class="home">
<table>
<tr>
<td class="left">
<img src="images2014/photo-event.jpg">
</td>
<td>
<h1 class="home">News & Events</h1>
<p class="home">
<span style="color:#c93">►</span> <a href="#">New Professional Opportunity</a><br />
<br />
<span style="color:#c93">►</span> <a href="#">Current Annual Report</a><br />
<br />
► <a href="#">FFS Newsletter (fall 2013)</a>
</p>
</td>
<td>
<h1 class="home">Calendar:</h1>
<p class="home">
<a href="#"><img src="images2014/Google-Calendar-icon.png" style="display:block; padding-right:7px; position:relative; float:left;"></a>
Click icon for calendar information</p>
<br /><br />
<h1 class="home" style="clear:both; margin-top:10px;">E-mail signup:</h1>
<p class="home"><span style="color:#c93">►</span>
<a href="#"><span style="color:#339;"><strong>Parents email list:</strong></span> Sign up to receive weekly updates and news</a><br />
<br />
<span style="color:#c93">►</span>
<a href="#"><span style="color:#339;"><strong>Grandparents, Alumni, Alumni Parents, Friends & Supporters:</strong></span> Sign up to receive news & event notices</a>
</p>
</td>
</tr>
</table>
</article>
And in the CSS : (coding that affects it)
.home { /*article section is 3 columns on index page*/
width:93%;
background-color:#fff;
margin:20px 30px;
padding:0;
}
td.left { /*left column with photo*/
width:34%;
margin:0;
padding:0;
}
td.left img{
position: relative !important;
float: left;
vertical-align:middle;
margin:0;
padding:0;
}
td.middle, td.right { /* middle and right columns */
font-size:11px;
width:33%;
padding
10px 0 20px;
border-left:1px solid #c93;
display: inline;
vertical-align:text-top;
}
td.bottom { /*last row -contains logos*/
font-size:10px;
width:33%;
text-align:center;
border:none;
}
h1.home{
margin
0 10px 0;
font-family:Arial, Helvetica, Geneva, sans-serif;
font-weight:bold;
font-size:16px;
color:#c93;
text-align:left;
}
h2, h3{margin:0;}
p.home {
margin:0;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-size:12px;
color:#000;
text-align:left;
}