Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

tables layout problem

Status
Not open for further replies.
may1hem

may1hem

Programmer
Joined
Jul 28, 2002
Messages
262
Location
GB
I'm coding a Web page using tables for layout and have found that whenever I add more text to one column then the stuff in another column moves down the page, leaving a white gap above it. Is this a standard problem with HTML tables? Any ideas how to fix it? Do you need to see the code?

What's the best coding method to lay out a Web page reliably? Layers? Tables? Other method?

Thanks for your help,

May
 
Sort by date Sort by votes
I think I know the problem you are having. You need to align the particular table row to the top like this:

<TABLE COLS=2 WIDTH=300>
<TR VALIGN=TOP>
<TD WIDTH=150>something here</TD>
<TD WIDTH=150>something else here</TD>
</TR>
</TABLE>
Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Upvote 0 Downvote
Thanks for the idea, Tony, but it didn't work. Here's the code for the Web page. When I add text to the middle column then the word &quot;Services&quot; in the left column gets pushed down. Any other ideas?

Thanks,

May

--------------


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<html>
<head>
<title>table problem</title>
</head>

<body>

<table width=&quot;700&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;>
<tr>
<td>
<!-- left vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
</td>
<td width=&quot;125&quot;><!-- sub-menu table -->
<table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot; border=&quot;0&quot;>
<tr>
<td width=&quot;125&quot; height=&quot;30&quot; bgcolor=&quot;#85AEF3&quot; class=&quot;submenutext&quot; align=&quot;left&quot; valign=&quot;middle&quot; nowrap>Services</td>
</tr>
<tr>
<td bgcolor=&quot;#808080&quot; height=&quot;2&quot; nowrap></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
</table>
</td>
<td>
<!-- right vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
</td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;433&quot; valign=&quot;top&quot;>
<table width=&quot;433&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- asp content table -->
<tr><td height=&quot;15&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;15&quot; alt=&quot;&quot; border=&quot;0&quot;></td></tr>
<tr valign=&quot;top&quot;>
<td valign=&quot;top&quot; class=&quot;normaltext&quot;>ASP content goes here<br><br><br>sample content on it's way<br><br><br>more content<br><br>and more</td>
</tr>
</table>
</td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;100&quot; valign=&quot;top&quot;>
<table width=&quot;100&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- rhs buttons table -->
<tr>
<td height=&quot;10&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;10&quot; alt=&quot;&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td valign=&quot;top&quot; align=&quot;right&quot;><img src=&quot;samplebtntr.gif&quot; width=&quot;90&quot; height=&quot;60&quot; alt=&quot;&quot; border=&quot;1&quot;></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
 
Upvote 0 Downvote
Tony was correct. You need to add the valign=top to the td tag where you have the comment sub-menu. Since your navigation table is inside that cell.

Dan
 
Upvote 0 Downvote
Hi mayhem1

Try this:


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<html>
<head>
<title>table problem</title>
</head>

<body>

<table width=&quot;700&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;>
<tr>
<td valign=&quot;top&quot;>
<!-- left vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
<td width=&quot;125&quot; valign=top><!-- sub-menu table -->
<table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot; border=&quot;0&quot;>
<tr>
<td width=&quot;125&quot; height=&quot;30&quot; bgcolor=&quot;#85AEF3&quot; class=&quot;submenutext&quot; align=&quot;left&quot; valign=&quot;top&quot; nowrap>Services</td>
</tr>
<tr>
<td bgcolor=&quot;#808080&quot; height=&quot;2&quot; nowrap></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
</table>
</td>
<td>
<!-- right vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;433&quot; valign=&quot;top&quot;>
<table width=&quot;433&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- asp content table -->
<tr><td height=&quot;15&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;15&quot; alt=&quot;&quot; border=&quot;0&quot;></td></tr>
<tr valign=&quot;top&quot;>
<td valign=&quot;top&quot; class=&quot;normaltext&quot;>ASP content goes here
<p><br>sample content on it's way<br><br><br>more content<br><br>and more
</td>
</tr>
</table>
</td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;100&quot; valign=&quot;top&quot;>
<table width=&quot;100&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- rhs buttons table -->
<tr>
<td height=&quot;10&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;10&quot; alt=&quot;&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td valign=&quot;top&quot; align=&quot;right&quot;><img src=&quot;samplebtntr.gif&quot; width=&quot;90&quot; height=&quot;60&quot; alt=&quot;&quot; border=&quot;1&quot;></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>


Hope this help

Nook6
 
Upvote 0 Downvote
Thanks guys! It's amazing what a 2nd pair of eyes can do!!

It works beautifully now,

May
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question Question
Achieving this grid layout in css
Replies
1
Views
420
tyutghf
tyutghf
PeDa
  • Locked
  • Question Question
Horizontal rule and CSS problem
Replies
2
Views
1K
PeDa
PeDa
dvannoy
  • Locked
  • Question Question
Simple Layout
Replies
3
Views
427
vacunita
vacunita
Carlvic
  • Locked
  • Question Question
How can i make layout 2 columns
Replies
3
Views
446
Carlvic
Carlvic
Katerine
  • Locked
  • Question Question
CSS question: Displaying 2-level unordered lists in a table layout?
Replies
7
Views
532
Katerine
Katerine

Part and Inventory Search

Sponsor

Back
Top