SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float Multiple Tables to the Top

    I am trying to get 3 tables align to the same row. Any help rendered is greatly appreciated

    Existing Problem

    What I want to achieve

    Link to page

    Body
    Code:
    <table width="920px">
    <tbody>
    <tr>
    <td width="40%">
    <table width="40%">
    <tbody>
    <tr>
    <td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">Our Subsidiaries</span></td>
    </tr>
    <tr>
    <td class="tablecontent" style="text-align: justify;"><a href="http://www.globaldenso.com/motorsports/index.html" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link1.gif" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-494" /></a>&nbsp;&nbsp;&nbsp;<a href="http://denso-yea.com/" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link2.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-495" /></a><br/>
    <a href="http://www.globaldenso.com/en/aboutdenso/globalnetwork/globalmap/index.html" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link3.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-496" /></a>&nbsp;&nbsp;&nbsp;<a href="http://www.globaldenso.com/en/" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link4.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-497" /></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </td>
    <td width="30%">
    <table width="30%">
    <tbody>
    <tr>
    <td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">Quick Links</span></td>
    </tr>
    <tr>
    <td class="tablecontent" style="text-align: justify;">Find Your Spark Plug
    
    Spark Plug Cross Reference</td>
    </tr>
    </tbody>
    </table>
    </td>
    <td width="30%">
    <table width="30%">
    <tbody>
    <tr>
    <td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">DENSO Group Companies</span></td>
    </tr>
    <tr>
    <td class="tablecontent" style="text-align: justify;">
    Japan
    -- <a href="http://www.denso.co.jp/ja/" target="_blank">Japan(Japanese)</a>
    
    
    America
    -- <a href="http://www.densona.com/" target="_blank">North America</a>
    -- <a href="http://www.denso.com.br/" target="_blank">Brazil</a>
    
    Europe
    -- <a href="http://denso-europe.com/" target="_blank">Europe</a>
    
    Asia/Oceania
    -- <a href="http://www.denso.com.au/" target="_blank">Australia</a>
    -- <a href="http://denso-europe.com/" target="_blank">Singapore</a>
    -- <a href="http://www.denso.co.th/" target="_blank">Thailand</a>
    -- <a href="http://www.denso.co.id/" target="_blank">Indonesia</a>
    -- <a href="http://www.denso.com.my/home.aspx" target="_blank">Malaysia</a>
    -- <a href="http://www.denso.com.cn/" target="_blank">China</a>
    -- <a href="http://www.denso.com.ph/" target="_blank">Philippines</a>
    -- <a href="http://www.denso.com.tw/" target="_blank">Taiwan</a>
    -- <a href="http://www.denso.co.in/DNIN/index.html" target="_blank">India</a></td>
    </tr>
    </tbody>
    </table>
    </tr>
    </tbody>
    </table>
    CSS
    Code:
    td.tableheader {
    vertical-align: top;
    background-color:#336666;
    width: 30%;
    padding-top:4px;
    padding-bottom:4px;
    padding-right:9px;
    padding-left:9px;
    border-color: #c0c0c0;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    }
    
    td.tablecontent {
    vertical-align: top;
    width: 30%;
    height: 100px;
    padding-top:4px;
    padding-bottom:4px;
    padding-right:9px;
    padding-left:9px;
    border-color: #c0c0c0;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi . You have this currently
    Code:
    table tr td, table tr th {
    
    • text-align: left;
    • padding: 5px 7px 3px 7px;
    • vertical-align: middle;
    • border-bottom: 1px solid white;
    }

    That's making the table to be vertically aligned in hte middle (the 3rd <td> (with the last column) doesn't appear to be affected because it's so long). If you need that to be a default property/value for elsewhere on the site, just reset it for that table .

    Preferably just assign that one parent table a class, and set the vertical-align to top . Or just remove that vertical-align rule I posted and it'll be fixed. Either one. Depends on the rest of the needs on your site.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi . You have this currently
    Code:
    table tr td, table tr th {
    
    • text-align: left;
    • padding: 5px 7px 3px 7px;
    • vertical-align: middle;
    • border-bottom: 1px solid white;
    }

    That's making the table to be vertically aligned in hte middle (the 3rd <td> (with the last column) doesn't appear to be affected because it's so long). If you need that to be a default property/value for elsewhere on the site, just reset it for that table .

    Preferably just assign that one parent table a class, and set the vertical-align to top . Or just remove that vertical-align rule I posted and it'll be fixed. Either one. Depends on the rest of the needs on your site.
    Hi Ryan,

    Thank you so far. I have managed to find it through firebug. Is there any good tutorials for usage of FireBug?

    Chris

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Not that I know of. Just play with it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •