CODEWITHSUNDEEP
htmlcss
ohitsanazn
ohitsanazn

Reputation: 247

Trouble with tables

HTML / CSS noobie here.

Sorry if this is a very easy problem, but I don't know how to word it on Google.

Website

This is a (very, very) rudimentary website I am making for my high school robotics team.

How do I get the sidebar to start at the top and not centered? It is a table inside of another table.

Here is the CSS for the "sidebar:"

#sidebar {
height: 100%;
width: 200px;
}

EDIT: Here is the HTML:

<body>
<table>
    <tr class="banner">
        <h1>Banner goes here</h1>
        <p>Nothing here is final. No, the final site will not be this ugly.</p>
    </tr>
    <tr>
        <td>
            <table class="center" id="sidebar">
                <tr><td>Home</td></tr>
                <tr><td>About</td></tr>
                <tr><td>Sponsors</td></tr>
                <tr><td>Contact Us</td></tr>
                <tr><td>FTC 5969</td></tr>
                <tr><td>FRC 4538</td></tr>
                <tr><td>FTC 7084</td></tr>
                <tr><td>Media</td></tr>
                <tr><td>Events</td></tr>
            </table>
        </td>
        <td>
            (main content)
        </td>
    </tr>
</table>

Upvotes: 0

Views: 84

Answers (2)

Joe
Joe

Reputation: 68

I think I've figured this out for you.

I tried this with the exact same thing on my site

<td style="vertical-align:top;">

Add that style attribute to the td tag surrounding your content on the left and it should whack it up to the top of the cell it's in.

The CSS alternative is this

#sidebar {
height: 100%;
width: 200px;
vertical-align:top;
}

or if you specifically want it just for your td tags just do

#sidebar td {
vertical-align:top;
}

underneath your main #sidebar entry

Upvotes: 3

sensei
sensei

Reputation: 7592

If you use table inside of other table just use vertical-align:top on TD of #sidebar.

DEMO: http://jsfiddle.net/nukec/7XjTv/

HTML:

<table class="one" >
    <tr>
        <td>
<table>
    <tr>
        <td>            sdsdsdsdsd
                   </td>
    </tr>
</table> 
        </td>
    </tr>
</table>

CSS:

table{
    border: 1px solid red;
}

.one{
    height:500px;
}
td{
    vertical-align:top;
}

Upvotes: 2

Related Questions