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

Recommended Answers

All 13 Replies

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...

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?

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

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

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

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

my table and div tags are position relative

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

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

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 !

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

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).

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.