Member Avatar for TheTeen

Check The navigation bar seems to overlap the content box (even when the big map isn't there.

Here is the code:

<table width="760px" border="0">
  <tr>
    <td colspan="2" style="background-color:white;"><div id="container">
<div><img src="" /></div>
<div style="position: absolute; left: 620px; top:24px;">
<span style="font-weight: bold; color: #000000;">Hiya, (username)!
<br>vP:  (points)
<br>Active Pet:  (activepet)</span>
    </td>
  </tr>
  <tr>
    <td style="background-color:#ebf7ff;width:145px;height:100%;position:absolute;text-align:top;">
      Left menu<br />
      Item 1<br />
      Item 2<br />
      Item 3...
    </td></tr>
    <td style="background-color:#eeeeee;width:615px;text-align:top;">
(datestamp)
  • 4 Contributors
  • 3 Replies
  • 600 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by sreein1986

Dani AI

Generated

Quick diagnosis: the overlap is caused by positioned elements being removed from normal flow while the page still uses a table-based layout. Absolutely positioned boxes are placed relative to the nearest ancestor that has a non-static position; if no such ancestor exists they end up positioned against the page/viewport, which explains the nav sitting on top of the content. was pointing at the right area (positioning inside table cells), and 's margin tweak is a reasonable quick fix — but a more robust approach is recommended.

Practical fixes (robust, ordered):

  1. Create a positioned container so any absolute children are anchored predictably.
  2. Stop using absolute positioning for the main column/sidebar — use floats or a CSS layout so items remain in flow.
  3. If absolute positioning must be used for a small user box, give the containing wrapper position: relative and use z-index to control stacking.
  4. Clear floats (or use a clearfix) so the wrapper grows to contain floated children.

Example CSS (simple, compatible approach):

/* anchor absolute children */
#wrapper { position: relative; max-width: 760px; margin: 0 auto; }

/* small user box that sits over the header */
.user-box { position: absolute; right: 20px; top: 24px; z-index: 5; }

/* layout using floats so content doesn't overlap */
.sidebar { float: left; width: 160px; background: #ebf7ff; }
.main { margin-left: 180px; background: #eeeeee; }

/* contain floats */
.container::after { content: ""; display: table; clear: both; }

Modern alternative: replace the table with a simple flexbox container (display:flex) — cleaner, responsive, and less fragile than mixing tables with positioned DIVs.

Notes and troubleshooting: if the table approach must remain, set the specific TD to position: relative to make absolute children anchor to that cell. Use browser dev tools to inspect the computed position and the element's containing block (shows where the absolute box is anchored). Testing across viewport widths and in any legacy browsers that must be supported will catch remaining edge cases.

Recommended Answers

All 3 Replies

Member Avatar for JugglerDrummer

You fixed the site I can see. You can just change the margin-left of #center to shift the image over now. :D Good job changing from table based layout!

Member Avatar for MidiMagic

This is a known bug. Divs don't behave properly inside table cells.

Member Avatar for sreein1986

Check The navigation bar seems to overlap the content box (even when the big map isn't there.

Here is the code:

<table width="760px" border="0">
  <tr>
    <td colspan="2" style="background-color:white;"><div id="container">
<div><img src="" /></div>
<div style="position: absolute; left: 620px; top:24px;">
<span style="font-weight: bold; color: #000000;">Hiya, (username)!
<br>vP:  (points)
<br>Active Pet:  (activepet)</span>
    </td>
  </tr>
  <tr>
    <td style="background-color:#ebf7ff;width:145px;height:100%;position:absolute;text-align:top;">
      Left menu<br />
      Item 1<br />
      Item 2<br />
      Item 3...
    </td></tr>
    <td style="background-color:#eeeeee;width:615px;text-align:top;">
(datestamp)
<table width="760px" border="0">
  <tr>
    <td colspan="2" style="background-color:white;"><div id="container">
<div><img src="" /></div>
<div style="position: absolute; left: 620px; top:24px;">
<span style="font-weight: bold; color: #000000;">Hiya, (username)!
<br>vP:  (points)
<br>Active Pet:  (activepet)</span></div>
	</div>
    </td>
  </tr>
  <tr>
    <td style="background-color:#ebf7ff;width:145px;height:100%;position:absolute;text-align:top;">
      Left menu<br />
      Item 1<br />
      Item 2<br />
      Item 3...
    </td></tr>
    <tr>
    <td style="background-color:#eeeeee;width:615px;text-align:top;">
(datestamp)</td>
</tr>
	</table>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.