tags:

views:

38

answers:

2

I am trying to get a table of icons appear on the same line as the header.

In the HTML below, the icons appear on a separate line.

I tried using 'top' attribute to move the table, but this is not a good solution because then there's an ugly space between the icons table and the rest of the document. How can I fix this?

alt text

<html>
<head>
<style type="text/css">
#action-icons
{
    float:right;
    position:relative;
    border:0;
}
</style>
</head>
<body>
    <h1 class="edit">Bla bla</h1>

    <table id="action-icons">
        <tbody>
            <tr>
                <td><img width="64" height="64"/></td>
                <td><img width="60" height="60"/></td>
            </tr>
            <tr>
                <td><img width="36" height="36"/></td>
                <td><img width="36" height="36"/></td>
            </tr>
        </tbody>
    </table>

    <table width="100%" class="tasksgrid">
        <tbody>
            <tr>
                <th class='taskcell'>One</th>
                <th class='taskcell'>Two</th>
            </tr>
        </tbody>
    </table>
</body>
</html>
A: 

You can use the <thead> tag to assign values in an HTML table header. Example: http://www.w3schools.com/tags/tag_thead.asp

Drell
+1  A: 

Put div's around it:

<html>
<head>
<style type="text/css">
#action-icons
{
    float:right;
    position:relative;
    border:0;
}
.float_left {
       float:left;
}
</style>
</head>
<body>
    <div class="float_left">
        <h1 class="edit">Bla bla</h1>
    </div>

    <div class="float_left">
        <table id="action-icons">
            <tbody>
                <tr>
                    <td><img width="64" height="64"/></td>
                    <td><img width="60" height="60"/></td>
                </tr>
                <tr>
                    <td><img width="36" height="36"/></td>
                    <td><img width="36" height="36"/></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="float_left">
        <table width="100%" class="tasksgrid">
            <tbody>
                <tr>
                    <th class='taskcell'>One</th>
                    <th class='taskcell'>Two</th>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
PlanetMaster
This looks good :)I just changed the "float_left" to "float_right" on the action-icons table.
ripper234