954,591 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

table overlap div tag

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

andrewliu
Junior Poster
188 posts since Jul 2010
Reputation Points: 10
Solved Threads: 0
 

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

inplainsite
Newbie Poster
21 posts since Jun 2010
Reputation Points: 11
Solved Threads: 4
 

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?

andrewliu
Junior Poster
188 posts since Jul 2010
Reputation Points: 10
Solved Threads: 0
 

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

inplainsite
Newbie Poster
21 posts since Jun 2010
Reputation Points: 11
Solved Threads: 4
 

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

andrewliu
Junior Poster
188 posts since Jul 2010
Reputation Points: 10
Solved Threads: 0
 

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

inplainsite
Newbie Poster
21 posts since Jun 2010
Reputation Points: 11
Solved Threads: 4
 

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

dennishall
Junior Poster in Training
71 posts since Nov 2009
Reputation Points: 10
Solved Threads: 1
 

my table and div tags are position relative

andrewliu
Junior Poster
188 posts since Jul 2010
Reputation Points: 10
Solved Threads: 0
 

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

Zero13
Practically a Master Poster
624 posts since Jan 2009
Reputation Points: 120
Solved Threads: 139
 

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

andrewliu
Junior Poster
188 posts since Jul 2010
Reputation Points: 10
Solved Threads: 0
 

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 !

Zero13
Practically a Master Poster
624 posts since Jan 2009
Reputation Points: 120
Solved Threads: 139
 

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

inplainsite
Newbie Poster
21 posts since Jun 2010
Reputation Points: 11
Solved Threads: 4
 

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

dennishall
Junior Poster in Training
71 posts since Nov 2009
Reputation Points: 10
Solved Threads: 1
 

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

christinamarie1
Newbie Poster
1 post since Feb 2012
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You