Align a Div to the top of a <td>

HTML & CSS
1

How can I align this div to the very top of my <td>?


<td>
	<div class="label" style="width: 100%; height: 37px; text-align: left; vertical-align: top; padding: 0px 0px 0px 7px;">
		<a href="#" id="showOptions"><img src="Images/aright.jpg" /> Click here to claim a reward:</a>
	</div>
	<div class="optionsContainer" id="optionsContainer">
		test
	</div>
</td>

I really do not want to use absolute positioning if possible.

Disclaimer: I do not use inline styles, I just have them here for quick testing.

2

Set the TD with vertical-align:top;

3

well I’m trying not to use td attributes. I work more tableless now as a software engineer and I hate using tags in <td>s when we should be using css to manage this. Adding stuff to a <td> tag other than class and id is just wrong.

4

That IS a CSS tag. :wink:
http://www.w3schools.com/Css/pr_pos_vertical-align.asp

5

Here’s a follow-up with an update of my code…still the same issue:


.checkoutSelect
{
    vertical-align: top;
    padding: 0px 0px 5px 5px;
    width: 392px;
}

#selectOptions
{
   border: 1px solid #ccc;
   padding: 5px;
   width: 300px;
}

<td>
    <div class="checkoutSelect">
	<a href="#" id="showOptions"><img src="Images/rarrow.jpg" /> Click here to claim a reward:</a>
    </div>
    <div id="selectOptions">
	test
    </div>
</td>
6

Well, you have 5px of padding on the top… And those top and bottom attributes are useless, so you can remove them.

7

see the update of my previous post. I changed it.

8

That’s as close as you can get. Anything else would have to be cellpadding or cellspacing.

9

Resolved. Must have a width and height along with the vertical-align:

.checkoutSelect
{
    vertical-align: top;
    padding: 0px 0px 5px 5px;
    width: 392px;
    height: 61px;
}

otherwise it has no height and can’t go to the top of anywhere. The div needs a height so it has room to go to the top.

10

Hi, vertical-align doesn’t work on block elements, so your logic is slightly flawed :).

Glad you got it resolved though somehow :slight_smile:

11

It doesn’t work on block elements, only table. But he was setting on a table, not a block element. That’s how it’s working.

12

But in his above example, the element he just said he set vertical align on was this

<div class="checkoutSelect">

Thus a div, where are you seeing the table element? That code right here is the most recent of what he posted…

ALso, vertical-align doesn’t just work on tables :wink: (to clarify)

13

Also, vertical-align doesn’t just work on tables :wink: (to clarify)

True, but close enough. But I should be more clear that if he wants to know the other things, to research it.

I think how it is working is the height is the same as the DIV or something. I’ve a feeling if V-Align was removed, nothing would change.

14

You sir are correct, it would do absolutely nothing, but then again if he says it is working then I’m in no rush to see why/help more. I’m already swamped with trying to solve a bagillion other threads :p.

The height being same as the div doesn’t make sense to me, but I’m probably just tired.

Either way, I’m out :slight_smile:

15

um, I needed to take out the height on one of the classes. So no, not it’s not working because the height on the .checkoutSelect class below was pushing the text up only because the text was laying on that div and when the div got higher it naturally pushed the text up which is really not a good solution at all. But I needed to take out the height because if the inner div grows a lot vertically, I don’t want it overflowing the outside div and it would if I had a neight on .checkoutSelect so I took height out of .checkoutSelect.

Note also that I moved the checkoutSelectOption div to be contained inside the checkoutSelect div. So checkoutSelect is wrapping that div now.

Now I’m back to the same problem. :slight_smile:

Latest code:

.checkoutSelect
{
    vertical-align: top;
    padding: 0px 0px 5px 5px;
    width: 392px;

}

#checkoutSelectOptions
{
    border: 1px solid #ccc;
    padding: 5px;
    width: 300px;
}

<td>
    <div class="checkoutSelect">
	<a href="#" id="showROptions"><img src="Images/arrowright.jpg" class="image_textAlignMiddle" /> Click here to claim a coupon:</a>
	<div id="checkoutSelectOptions">
	    test<br />
	    test<br />
	    test<br />
	    test<br />
	    test<br />
	    test<br />
	</div>
    </div>
</td>
16

I don’t really want to use attributes on tables (we should always use or aim to use CSS instead) but right now valign=top is working to get that first div aligned to the top of the <td>. I feel dirty though using valign now that I’ve gone tableless but not even that, if I stayed with table design I’d still due to best practices and the whole purpose of utilizing css is to use css to do this, not some attribute on the table because like everything you’re not using a class to manage changes…you’re hacking stuff into the tags of a table which is a NONO in my book…I will simply not do it.

Ok but for now the hack works until I find a CSS way of doing this. I have added a valign to both <td>s and so now the image along with that hyperlink are aligned top to the <td>.

If anyone has a way to do this in CSS please do fill me in because I have not been able to:

.checkoutSelect
{
    vertical-align: top;
    padding: 0px 0px 5px 5px;
    width: 392px;
}

#checkoutSelectOptions
{
    border: 1px solid #ccc;
    padding: 5px;
    width: 300px;
}

<tr>
	<td style="padding-left:7px" width="73px" valign="top"><img src="images/rewardsProgram/rewardsIcon.jpg" align="left" /></td>
	<td valign="top">
    		<div class="checkoutSelect">
			<a href="#" id="showROptions"><img src="Images/arrowright.jpg" class="image_textAlignMiddle" /> Click here to claim a reward:</a>
			<div id="checkoutSelectOptions">
	    			test<br />
	    			test<br />
	    			test<br />
	    			test<br />
	    			test<br />
	    			test<br />
			</div>
    		</div>
	</td>
</tr>