Hello, I'm having trouble with a div box. I want the box to align at the top of the table it's in. You can see what I'm talking about here:

http://www.elementprofessionals.com/about.html

I would like the gray box to align with "Principles" at the top of the table. I know this has something to do with the amount of text on the right side of the page, because the gray box does align at the top of the page on other pages that don't have much text (See: http://www.elementprofessionals.com/upload.html)

Here's my css:
http://www.elementprofessionals.com/hjr2.css

I'm fairly new to css. I've tried "top align" on just about everything on the css, and on the page itself. I don't know what else I should try. Any help?

Thanks a lot!

The h1 appears to be at the top of the td, except for the empty p that comes immediately before it.

Hi Darin, thanks for your input although I'm still confused. I'm not finding the empty <p> you're referring to. And would where the <h1> is in the code make any difference on whether or not the gray box aligns at the top of the table? I posted the code so you can see what I'm talking about. Thanks a lot for your help!


<table width="750" cellpadding="0" cellspacing="0" border="0" align="left" valign="top">
<tr><td>
<div class="rightColumn" align="top" valign="top">
<h1 style="text-align:center">Contact Info</h1>
<p style="text-align:left">To discuss your recruiting needs, or find your next employment opportunity, call us today:</p>
<p class="contact" style="text-align:left"><img src="img/phone.gif" width="16" height="12" style="border:0" alt="Phone" class="contentIcon" />  405-601-0118</p>

<p class="contact" style="text-align:left"><img src="img/mail.gif" width="16" height="12" style="border:0" alt="Email" class="contentIcon" />  <a href="mailto:info@elementprofessionals.com">Email Us</a></p>
<p class="contact" style="text-align:left"><img src="img/arrow.gif" width="16" height="14" style="border:0" alt="Job Search" class="contentIcon" />  <a href="http://www.elementprofessionals.com">Job Search</a></p>
<p class="contact" style="text-align:left"><img src="img/arrow.gif" width="16" height="14" style="border:0" alt="Employer Search" class="contentIcon" />  <a href="http://www.elementprofessionals.com">Employer Search</a></p><BR>
<p class="contact" style="text-align:center">Follow Us On<BR>

<a href="http://twitter.com/ElementPros"><img src="img/twitter_logo.jpg" width="120" height="44" style="border:0" alt="Follow Us on Twitter" class="contentIcon" /></a>
<br />

</div></td>

This is what I see on your about.html page:

Ahh...I see now. Well I took out the paragraph code and the left gray column still won't align at the top. Any other ideas? Thanks so much!

I think I may have misunderstood you earlier. Anyway, if I understand you correctly, then you're looking for the valign="top" attribute:
http://htmlhelp.com/reference/html40/tables/td.html

I finally have a minute to come back to this problem. Yes, I was using valign="top" on the table, the td...basically everywhere and it still is not aligning at the top. It's really pronounced on the link below, and you can check the code and see that I'm aligning everything at the top

http://www.elementprofessionals.com/resources.html

I can not think of anything else that's keeping it from aligning at the top. Any help?

The <td> above has no valign attribute.

Bingo! Can't believe I missed that. Thanks a lot for your help!

Maybe you were too busy putting 'valign' everywhere it shouldn't be? Just for the record, you can't use valign with TABLE and certainly not with DIV. Trial and error isn't always a good method.