Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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

like image 393
Hayi Avatar asked Dec 07 '22 14:12

Hayi


2 Answers

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>
like image 56
Zuul Avatar answered Jan 05 '23 22:01

Zuul


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.

like image 25
Nivas Avatar answered Jan 05 '23 21:01

Nivas