SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align a Div to the top of a <td>

    How can I align this div to the very top of my <td>?
    Code:
    <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. #2
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the TD with vertical-align:top;

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a follow-up with an update of my code..still the same issue:

    Code:
    .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. #6
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you have 5px of padding on the top... And those top and bottom attributes are useless, so you can remove them.

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    see the update of my previous post. I changed it.

  8. #8
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's as close as you can get. Anything else would have to be cellpadding or cellspacing.

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Resolved. Must have a width and height along with the vertical-align:

    Code:
    .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. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, vertical-align doesn't work on block elements, so your logic is slightly flawed .

    Glad you got it resolved though somehow
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    But in his above example, the element he just said he set vertical align on was this
    Code:
    <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 (to clarify)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, vertical-align doesn't just work on tables (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. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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 .

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

    Either way, I'm out
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Latest code:


    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. #16
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:


    Code:
    .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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •