alignment problem in <td>

1 reply [Last post]

Thu, 2014-03-20 03:27

tebk77

Offline

Regular

Last seen: 8 years 34 weeks ago

Timezone: GMT-4

Joined: 2009-05-16

Posts: 42

Points: 49

Hi, i have 3 td columns. When I placed an image in the 1st , the 2nd and 3rd td dropped down. 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.

In HTML file scroll down to - 3 columns start here - That is the section I'm talking about.

And in the CSS file scroll down to /****** HOME PAGE ONLY *****/ That section contains the coding.

BELOW IS ENTIRE CODING:

<!DOCTYPE html>
<html>
<head>
 
  <title>FFS HOME PAGE</title>
 
  <meta name="description" content="Frankford Friends School provides an affordable and quality Quaker education for grades Pre-K to 8 in Philadelphia. Established in 1833.">
  <meta name="keywords" content="Quaker, Quaker school, Quaker education, affordable education, Frankford, Philadelphia, academics, teachers, faculty, staff, students, classes, principal, meeting, Pre-K, Kindergarten, to 8th grade, Pre-K to 8, library, literacy, social studies, mathematics, art, science, music, Spanish, physical education, early care, after school care, EITC tax credit, scholarships, funding" />
  <meta charset="utf-8">
  <!-- Helps with rendering on mobile devices -->
  <meta name="viewport" content="width=device-width">
 
  <!-- jQuery code to help with :hover on iOS devices -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
        $("nav ul li").click(function () { });
      }
    });
  </script>
 
  <link href="mainstyleMARCH18.css" rel="stylesheet" type="text/css">
  <link href="navigationMar2014.css" rel="stylesheet" type="text/css">
 
  <link href="PrintStyles.css" rel="stylesheet" media="print">
 
<style type="text/css">
/* To make older browser HTML5 aware */
header, nav, aside, article, footer {
	display: block;
}
</style>
 
</head>
 
<body>
	<script>
    	//Make older browsers aware of new HTML5 layout tags
    	'header nav aside article footer'.replace(/\w+/g, function (n) { document.createElement(n) })
	</script>
 
<div id="wrapper">
 
    <header>
      <a href="index.html"><img src="/images2014/FFSlogo-address.jpg" alt="Frankford Friends School, 1500 Orthodox Street, Philadelphia, PA" /></a>
      <span class="upperright">
        <a href="#">&bull; CONTACT US</a><br />
        <a href="#">&bull; DIRECTIONS</a><br />
      </span>
      <span class="quote">&nbsp; Celebrating over 180 Years of Quality, Affordable Quaker Education</span>
    </header>
 
    <!-- NAVIGATION BAR -->
    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li>
          <span>ABOUT FFS</span>
          <ul>
			<li><a href="about.html">About FFS</a></li>
            <li><a href="welcome.html">Welcome from the Principal</a></li>
            <li><a href="worship.html">Meeting for Worship</a></li>
            <li><a href="staffFFS.html">Faculty &amp; Staff</a></li>
            <li><a href="afterFFS.html">Life After FFS</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="job.html">Job Openings</a></li>
          </ul>
        </li>
        <li class="wider">
          <span>ENROLLMENT</span>
          <ul>
			<li><a href="admissionFFS.html">Enrollment</a></li>
			<li><a href="admissionFAQ.html">Admission FAQs</a></li>
			<!-- 2 lines solution --> 			
			<li><a href="FinancialAid_2014-2015.pdf" rel="nofollow" target="_blank" style="line-height:14px;text-indent:0;padding-left:8px">Financial Aid 2014-2015 Information</a></li>			
 
			<li><a href="openhouse.html">Open House Dates</a></li>
			<li><a href="tuitionFFS.html">Tuition</a></li>
			<li><a href="trans.html">Transportation</a></li>
			<li><a href="care.html">Early Care/ Afterschool Care</a></li>
			<li><a href="camp.html">Summer Camp</a></li>
          </ul>
        </li>
        <li class ="wider">
          <span>ACADEMICS</span>
        </li>
        <li>
          <span>PARENTS</span>
          <ul>
			<li><a href="parents.html">Parents</a></li>
			<li><a href="closing.html">School Closings</a></li>
			<li><a href="library.html">Library</a></li>
			<li><a href="openhouse.html">Open House Dates</a></li>
			<li><a href="store.html">FFS Store</a></li>
          </ul>
        </li>
        <li>
          <span>ALUMNI</span>
          <ul>
            <li><a href="alumni.html">Alumni</a></li>
			<li><a href="alumninews.html">Alumni News</a></li>
			<li><a href="alumnishare_c.php">Share your contact info</a></li>
			<li><a href="alumnishare_n.php">Share your news</a></li>
			<!-- 2 lines solution --> 			
			<li><a href="alumnicontact.html" style="line-height:14px;text-indent:0;padding-left:8px">Contact the Director of Alumni Relations</a></li>			
          </ul>
        </li>
        <li>
          <span>GIVING</span>
          <ul>
			<li><a href="http://www.frankfordfriendsschool.org/give-fundFFSnew.html#link_sustain">Sustainers Circle</a></li>
			<li><a href="give-fundFFSnew.html">The Annual Fund</a></li>
			<li><a href="give-buildFFS.html">The Trickey Building</a></li>
			<li><a href="give-taxFFS.html">EITC Tax Credit Scholarships</a></li>
			<li><a href="give-auctionFFS.html">Annual Winter Event</a></li>
			<li><a href="give-corpFFS.html">Corporate Matching Gifts</a></li>
			<li><a href="give-planFFS.html">Planned Giving</a></li>
          </ul>
        </li>
      </ul>
    </nav><!-- END NAVBAR-->
 
	<!-- MAIN PHOTO -->
	<img src="images2014/3boysreadLG.jpg" style="display:block;width:93%;margin:0 auto;" alt="3 boys reading at a desk">
 
 
<!-- 3 columns start here -->
    <strong><article class="home">
    	<table>
    		<tr>
    			<td class="left">
    				<img src="images2014/photo-event.jpg" alt="Winter Brunch Event 2013">
				</td>
 
				<td class="middle">
					<h1 class="home">News &amp; Events</h1>
						<p class="home">
							<span style="color:#c93">&#9658;</span> <a href="#">New Professional Opportunity</a><br />
								<br />	
							<span style="color:#c93">&#9658;</span> <a href="#">Current Annual Report</a><br />	
								<br /><br /><br /><br />
							&#9658; <a href="#">FFS Newsletter (fall 2013)</a>
						</p>
				</td>
				<td class="right">
					<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;" alt="google calendar icon"></a> 
							<span style="font-size:10px;">Click icon for calendar information</span>
						</p>
							<br /><br />
					<h1 class="home" style="clear:both; margin-top:10px;">E-mail signup:</h1>
						<p class="home"><span style="color:#c93">&#9658;</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">&#9658;</span> 
							<a href="#"><span style="color:#339;"><strong>Grandparents, Alumni, Alumni Parents, Friends &amp; Supporters:</strong></span> Sign up to receive news &amp; event notices</a>
						</p>				
				</td>
			</tr>
		</table></strong>
		<table>	
			<tr>
				<td class="bottom" style="width:34px;">
						<br /><br />
					<a href="https://www.ismfast.com/FastPage.php?id=357dcc8fcb8f5295de8cceedc64153bd" rel="nofollow" target="_blank"><img src="/images/FAST.jpg" style="height:75px;" alt="New Financial Aid Program for School Year: FAST." title="Click here for more information."></a>
						<br /><br />
					<a href="http://www.csfphiladelphia.org/" rel="nofollow" target="_blank"><img src="/logos/CSFPlogo_stack_152px.jpg" alt="CSF of Philadelphia logo"></a>
				</td>
				<td class="bottom">
						<br /><br />
					<a href="http://www.facebook.com/FrankfordFriendsSchool" onclick="target='newwindow'"><img src="/images/facebookLogo.gif" style="width:95px;" alt="Facebook logo" /></a><br />
						Visit our Facebook page for recent news, photo albums, and conversations! (You don&rsquo;t have to join Facebook to view our&nbsp;page.)<br />
							<br /><br />
						For Facebook members:
						<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.frankfordfriendsschool.org&amp;send=false&amp;layout=button_count&amp;width=145&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" 
						frameborder="0" style="display:block; margin: 0 auto; border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>							
				</td>
				<td class="bottom">EMPTY<br />
				</td>
			</tr>	
		</table>
 
      <br />
    </article>
 
	<!-- FOOTER -->
    <footer>
       FRANKFORD FRIENDS SCHOOL &nbsp;|&nbsp; 1500 ORTHODOX ST. &nbsp;|&nbsp; PHILADELPHIA, PA 19124 &nbsp;|&nbsp; PHONE 215.533.5368 &nbsp;|&nbsp; FAX 215.533.5523 &nbsp;|&nbsp; <a href="mailto:[email protected]">CONTACT&nbsp;US</a><br />
    </footer>
 
  </div><!-- END WRAPPER -->
</body>
</html>

HERE'S THE CSS:

/* mainstyleMARCH18 */
 
/* FFS colors-- #333399 deep blue  
#ffcc66 yellowish gold  
#339999 aqua
#cc9933 darker version of yellow for text */
 
    body {
      margin-left: auto;
      margin-right: auto;
      background-image: url(images2014/pattern-ffcc33.png);
      background-repeat: repeat;
      background-color: #ffcc33;
      font-family: Verdana, Arial, Helvetica, Sans-Serif;
      font-size: 10px;
      color: #000;
      text-align: left;
    }
 
    #wrapper {
      /* Set widths  % for FLUID  px for fixed - lesson 9 */
      /* ideal width is 850px - lesson 9 */
      /* But don't go below 600px or above 1200px */
      width: 90%; /* Wrapper is 90% of the browser width */
      min-width: 780px;
      max-width: 900px;
      margin: 20px auto;
      background-color: #fff;
      border: solid 3px #333399; /*FFS deep blue*/
      box-shadow: 0 0 10px 6px #696969;
    }
 
    /* Make HTML5 layout elements block elements for older browsers */
    header, nav, aside, article, footer, section {
      display: block;
    }
 
    img {border:none;}
 
 
/******** MASTHEAD SECTION ***********/
    header { /*FFSmasthead*/
      position: relative;
      border: none;
      margin: 0;
      padding: 12px;
      /* DO I NEED HEIGHT mentioned in px - since layout is fluid and in percent */
    }
    .upperright { /* links UPPER RT CORNER on header */
      position: absolute;
      z-index: 10;
      visibility: visible;
      left: 770px;
      top: 37px;
      font-family: 'Century Schoolbook', 'Times Roman', Times, serif;
      font-size: 13px;
      font-weight: normal;
      color: #000;
      line-height: 135%;
      text-align: left;
    }
    .upperright a {
        text-decoration: none;
      }
    /* Styling for hover and tap */
    .upperright a:active,
    .upperright a.currentpage {
        color: red;
    }
	.upperright a:hover {
		color: red;
		text-decoration:underline;
	}
    .quote {
      position: absolute;
      left: 125px;
      top: 100px;
      width: 86%;
      z-index: 20;
      border-top: 1px solid #339;
      font-family: 'Century Schoolbook', 'Times Roman', Times, serif;
      font-weight: bold;
      font-style: italic;
      font-size: 14px;
      color: #339;
      line-height: 175%;
      text-align: left;
    }
 
 
 
/********* ASIDE --left column **********/
aside { 
	width:270px;
	background-color:#fff;
	margin:30px 0 20px 30px;
	padding:0;
	float:left;
}
 
hr.topsiderule {
	width:250px;
	height:1px;
	border-width:0;
	color:#fc6;
	background-color:#fc6;
	margin:0 0 4px 0;
}
hr.siderule {
width:250px;
height:1px;
border-width:0;
color:#fc6;
background-color:#fc6;
margin:4px 0 4px 0;
}
.sidetext{ /* links in left column */
width:250px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-size:10px;
color:#339; /* FFS blue */
}
.sidetext a{
color:#339;
text-decoration:none;
}
 
/********** ARTICLE SECTION ***********/
article { /* all pages except for home page */
position:relative;
width:60%;
background-color:white;
margin:30px 30px 0 0;
padding:0;
float:right; 
}
 
article ul li{font-size:11px;}
 
.topicbar {
width:100%;
background-color:#fc6; /*yellowish gold*/
height:20px;
border-top:4px solid #339;
font-family: 'Century Schoolbook', 'Times Roman', Times, Serif;
font-size:14px;
font-weight:bold;
color:#339;
text-align:center;
margin:0;
padding-top:3px;
display:block;
position:absolute;
top:0;
left:0;
}
article p{ /* text under topicbar */
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-size:11px;
color:#000;
margin: 15px 15px 15px 15px;
text-align:left;
}
 
p.caption{
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-size:9px;
font-style:italic;
color:#000;
padding:3px 0;
text-align:left; 
}
 
 
/****** HOME PAGE ONLY *****/
.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;
border:none;
vertical-align:text-top;
}
td.middle, td.right { /* middle and right columns */
font-size:11px;
width:33%;
padding:0 10px 0 20px;
border-left:1px solid #c93;
vertical-align:text-top;
}
td.bottom {  /*last row -contains logos*/
font-size:10px;
width:33%;
text-align:center;
border:none;
}
 
h1.home{
	margin:0 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;
}
 
.rightarrow {color:#c93;}
 
/** END INDEX PAGE STYLES **/
 
 
 
 
/******* FOOTER ********/
footer{
clear:both;
width:93%;
margin:0 30px 20px 30px;
padding:0;
border-top: 1px solid #c93;
font-size: 10px;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
font-weight:normal;
color:#339;
line-height: 200%;
text-align:center;
}
 
/**** LINKS ON FOOTER ****/
footer a,
footer a:link,
footer a:visited,
footer a:active{
	text-decoration:none; 
	color:#339;
}
footer a:hover {text-decoration:underline; color:red;}
 
/*** END footer links ***/
 
 
/**** MISC ****/
a {
	text-decoration:none;
	color:#000;
}
a.current{ /* current page -used in sidebar links */
	font-weight:bold;
	color:#333399;
}
a:hover {text-decoration:underline; color:red;}
 
a.mailto:hover {text-decoration:underline; color:red;}

Tags:

Sat, 2014-04-05 23:07

bron

Offline

newbie

Last seen: 8 years 51 weeks ago

Timezone: GMT+2

Joined: 2013-09-17

Posts: 4

Points: 4

Hi. Try not to use 'table'

Hi. Try not to use 'table' because you heva no cell data.
Try this structure

html:
 
<article class="home">
	<div class="left">
		<img ... />
	</div>
	<div class="middle">
		<h1>...</h1>
		<p>...</p>
	</div>
	<div class="right">
		<h1>...</h1>
		<p>...</p>
		<h1>...</h1>
		<p>...</p>
	</div>
	<div class="bottom">
		<p>...</p>
		<p>...</p>
		<iframe ...></iframe>
	</div>
</article>
 
CSS:
 
.left, .middle, .right {
	float: left;
	width: 33%;
}
.bottom {
	float: left;
	width: 100%;
}

alignment problem in <td>

Hi. Try not to use 'table'

User login

Navigation