CODEWITHSUNDEEP
htmlcss
Hayi
Hayi

Reputation: 6236

Put an element of <td> always on top not in center

I have a table with 2 columns

<table border="2">
  <tr>
    <td>
        <div id="menupage" >
            ...
            ...
        </div>
    </td>

    <td align="center"  >   

        <div id="contentpage" >
            ...
            ...
        </div>

    </td>   
  </tr>
</table>

I want to keep always in top not in center if the size of <div id="contentpage" > is big

Upvotes: 6

Views: 10806

Answers (3)

Nivas
Nivas

Reputation: 18334

You probably are looking at valign or vertical-align.

<td align="center" valign="top">
    <div id="contentpage">
    </div>
</td>

See http://jsfiddle.net/nivas/Y84pS/

Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.

The second table in my jsfiddle example uses CSS, and gets the same functionality.

Upvotes: 4

SpaceBeers
SpaceBeers

Reputation: 13947

If you're going to use tables then you might as well just use valign.

eg: <div id="menupage" valign="top">

If you want to use CSS you can use vertical-align.

You could set all td's in your stylesheet like so:

td {
    vertical-align: top;
}

I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.

Upvotes: 2

Zuul
Zuul

Reputation: 16269

You can use the CSS vertical-align property to align the TD contents to the TOP:

vertical-align:top;

See this working Fiddle Example!

e.g.,

<table border="2">
  <tr>
    <td style="vertical-align:top;">
      <div id="menupage">
        ...
      </div>
    </td>
    <td align="center" style="vertical-align:top;">   
      <div id="contentpage" >
        ...
      </div>
    </td>   
  </tr>
</table>

Upvotes: 11

Related Questions