PDA

View Full Version : Is there any way to move this to the top?



Halko
Jul 19th, 2010, 04:40 PM
<div class="main">
<table border="0">
<tr>
<td>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra eleifend ante, non luctus turpis porta quis. Cras et cursus dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam egestas blandit elit, sed condimentum elit pharetra ut. Maecenas eleifend porttitor libero laoreet rutrum. Proin feugiat, metus a accumsan porta, turpis sapien tincidunt massa, id hendrerit diam dui sit amet felis. Sed porta viverra aliquet. Curabitur imperdiet aliquam eros quis dignissim. Ut a orci mauris. Curabitur condimentum aliquet nisl pellentesque consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur eget leo quis purus luctus ultricies quis et elit. Sed at sem risus. Aliquam tincidunt rutrum nisl, facilisis pulvinar justo faucibus at. Proin tincidunt justo eu sapien viverra a facilisis metus eleifend. Praesent risus nisl, mollis sit amet sagittis sit amet, interdum ac ipsum. Pellentesque fringilla rhoncus mollis. Aliquam suscipit pretium sapien non laoreet. Suspendisse varius turpis quis tortor malesuada at feugiat arcu hendrerit. Duis nec ipsum neque. Sed iaculis suscipit elit. Maecenas tellus magna, commodo at lobortis nec, dapibus id lacus. Quisque vitae ante nibh. Duis et mi arcu. Aliquam erat volutpat.
</p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra eleifend ante, non luctus turpis porta quis. Cras et cursus dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam egestas blandit elit, sed condimentum elit pharetra ut. Maecenas eleifend porttitor libero laoreet rutrum. Proin feugiat, metus a accumsan porta, turpis sapien tincidunt massa, id hendrerit diam dui sit amet felis. Sed porta viverra aliquet. Curabitur imperdiet aliquam eros quis dignissim. Ut a orci mauris. Curabitur condimentum aliquet nisl pellentesque consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur eget leo quis purus luctus ultricies quis et elit. Sed at sem risus. Aliquam tincidunt rutrum nisl, facilisis pulvinar justo faucibus at. Proin tincidunt justo eu sapien viverra a facilisis metus eleifend. Praesent risus nisl, mollis sit amet sagittis sit amet, interdum ac ipsum. Pellentesque fringilla rhoncus mollis. Aliquam suscipit pretium sapien non laoreet. Suspendisse varius turpis quis tortor malesuada at feugiat arcu hendrerit. Duis nec ipsum neque. Sed iaculis suscipit elit. Maecenas tellus magna, commodo at lobortis nec, dapibus id lacus. Quisque vitae ante nibh. Duis et mi arcu. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra eleifend ante, non luctus turpis porta quis. Cras et cursus dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam egestas blandit elit, sed condimentum elit pharetra ut. Maecenas eleifend porttitor libero laoreet rutrum. Proin feugiat, metus a accumsan porta, turpis sapien tincidunt massa, id hendrerit diam dui sit amet felis. Sed porta viverra aliquet. Curabitur imperdiet aliquam eros quis dignissim. Ut a orci mauris. Curabitur condimentum aliquet nisl pellentesque consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur eget leo quis purus luctus ultricies quis et elit. Sed at sem risus. Aliquam tincidunt rutrum nisl, facilisis pulvinar justo faucibus at. Proin tincidunt justo eu sapien viverra a facilisis metus eleifend. Praesent risus nisl, mollis sit amet sagittis sit amet, interdum ac ipsum. Pellentesque fringilla rhoncus mollis. Aliquam suscipit pretium sapien non laoreet. Suspendisse varius turpis quis tortor malesuada at feugiat arcu hendrerit. Duis nec ipsum neque. Sed iaculis suscipit elit. Maecenas tellus magna, commodo at lobortis nec, dapibus id lacus. Quisque vitae ante nibh. Duis et mi arcu. Aliquam erat volutpat.
</p>
</td>
</tr>
</table>
</div>

Styled with


table
{
width:100%
}
td
{
width:50%;
}
p
{
border-style:solid;
border-width:thin;
border-color:#c41e1e;
background-color:#f3ead1;
}

As seen in the attached screencap, the table cells move for whatever amount of text's in them (less in the first way). Is there any way to get them fixed to the top, right under the header?

nikee
Jul 19th, 2010, 05:29 PM
Try:


<td valign="top">
</td>

SB65
Jul 19th, 2010, 05:30 PM
Apply vertical-align:top to your td....

...however, you'd be much better off without tables for layout - have a look here (http://bonrouge.com/2c-hf-fullyfluid.php) for a way of building your design without them.

Halko
Jul 20th, 2010, 01:41 PM
Thanks. However, my client requested tables, so I can't get rid of them. Thanks for the tip anyway; I'll use it for my personal site.