Member Avatar for andrewliu

Hello,

I have a table and a div tag. My table is on the left side of the div tag.

I was wondering how to make sure that my div tag wont be disrupted by my table. When I have a table next to the div tag, my context in the div tag wraps around the table block. Is there a way to have it so my table is overlay on the div tag so my context won't wrap?

Thanks

  • 5 Contributors
  • 13 Replies
  • 663 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by christinamarie1

Dani AI

Generated

Short summary and focused fix based on the thread: had a left-side table that made text inside a nearby div wrap. and were headed in the right direction with z-index and positioning, and 's suggestion to inspect the generated HTML is important. The detail missing in the replies is how floats, the normal flow, and stacking contexts interact — that’s usually why a higher z-index seems to “not work.”

Key points and a practical approach: floats cause text to wrap because the floated element remains in the flow; to get a true overlay, remove the float and absolutely position the element inside a positioned wrapper so it sits on top without forcing wrapping. Also be aware that parents can create separate stacking contexts (for example when they have a z-index, transform, opacity, etc.), and a child’s z-index is confined to its stacking context. To reliably overlay, put the table and the content inside the same positioned container and absolutely position the table with a higher z-index.

Example CSS pattern (use different class names than the originals in the thread):

.wrapper { position: relative; }

.table-overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  width: 100px; /* table width */
}

.main-content {
  margin-left: 120px; /* prevent content sitting directly under the overlay if desired */
}

Troubleshooting checklist: validate the server-generated HTML for missing tags; inspect computed styles and stacking contexts with browser devtools; temporarily remove floats to observe behavior; avoid creating unexpected stacking contexts on parents; use pointer-events:none on the overlay only if clicks should pass through. ’s float:right workaround changed the flow so wrapping stopped, but the robust overlay solution is the absolute-position + shared stacking-context pattern.

Recommended Answers

All 13 Replies

Member Avatar for inplainsite

For the div tag:

style="z-index:80"

For the table tag:

style="z-index:90"

After this you can mess around with the margins, padding and float options...

Member Avatar for andrewliu

Thank you. I knew it was with the z-index. The numbers don't matter as long as one is greater than the other right?

Member Avatar for inplainsite

Yes. '80' and '90' were just an example.

Member Avatar for andrewliu

How come I tried using z-index but it still doesn't work. It doesn't go ontop of each other. It looks like a table and it just doesn't want to overlay.

need help

Member Avatar for inplainsite

Are you using margins or floats to put one on top of the other? Please post got if you cannot explain.

Member Avatar for dennishall

z-index only works for positioned elements such as position: relative etc...

Member Avatar for andrewliu

my table and div tags are position relative

Member Avatar for ko ko

Post your codes. We can't find the problem and help you without seeing any codes.

Member Avatar for andrewliu

well the thing is, im using a sql_query fetch and outputting it next to my table. so its overlapping my table.

here's my table that is inside a div

.left_nav {
	width:100px;	
	position:relative;
	float:left;
	z-index:1;
}

here's my search query div tag next to the table

.item-box-wrap {

	width:560px;
	z-index:20;
	position:relative;
	float:left;
}

I did figure out a way around it:

change the search result div table to float:right;

but if i can find the first problem then that'll be great and i learned something

thank you

Member Avatar for ko ko

The CSS is fine, actually like it, the table and div will appear next to each. Check the class name of the table and div that was correctly related with the CSS class.

If it is ok. It may be missing the opening or closing tag in the HTML.
You said that you were using the sql_query fetch, check your HTML source code inside the script file (PHP or Asp etc.).

The server side script produce simply HTML, so check the view source in browser when the script was processed, or validate these source codes. Here is W3C validator.

Hope this help !

Member Avatar for inplainsite

Please post your html where you call these two classes. You are trying to get these two to overlap each other?

Member Avatar for dennishall

When dealing with dynamic data, I have used max-wirdth along with the width settings and this works fine for divs that are left and right (side-by-side).

Member Avatar for christinamarie1

Learning that z-index only works for elements such as positioned helped! Thank you!

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.