How do I fix an existing nested table layout?

Posted on 2008-11-09
Last Modified: 2012-05-05
Somewhere along the way my webpage has gone wonky.  The left navigation table has moved to the lower left portion of the page so now there is a big white gap. I created the page from a template and do not know how to repair nested tables.  I have tried various programs to "move" the table back up (Dreamweaver, Frontpage, Firstpage 6000) and nothing is working. It is likely that someone who designs could easily look at this and notice a missing or extra tag but it is beyond me. Hope someone can assist me as the thought of attempting to redo this is overwhelming:(
Question by:Kimmy100700
    LVL 15

    Accepted Solution

    The temporarily solution is to modify this bit
    <td bgcolor="white" width="148" valign="top">

    <body bgcolor="#FFFFFF">
    <table cellspacing="1" cellpadding="0" border="0"
     bgcolor="black" id="shell" height="250" width="1000">
      <tr height="50">
        <td colspan="2" bgcolor="white"> 
          <table title="Banner" id="banner" border="0">
              <td><img src="images/banner.jpg" ALIGN=left width="100%"></td>
        <td bgcolor="white" width="148" valign="top"> 

    Open in new window

    LVL 6

    Assisted Solution


    I found the issue.

    The height of the content column has grown much taller than the height of your navigation.

    On line 23,

    Find: <td bgcolor="white" width="148">
    Replace with: <td bgcolor="white" width="148" valign="top">

    Added the valign="top" to bring it back to the top.

    If this does not work, use style="vertical-align: top" instead of valign="top"

    Hope this helps.

    Author Closing Comment

    Thank you so much!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now