Use <div> tags in Product Info Page

[rooisnor]

Not sure in which forum to post this question but I'm trying to use <div> tags in Product Info Page' description box. I want to use these layers to add images but it flows over the footer and header...

I tried to embed the div tags within a table to keep the page structure but it's not working..

Any ideas how I can do this and prevent the flowing?

[gjh42]

A link to see what you have done so far?

[rooisnor]

A link to see what you have done so far?

Here is a link to the actual page I have the problem. You'll see the images flows over the 'Tell a Friend' icon

Problem Page Here!

[gjh42]

I'd say the principal problem is that you are using absolute positioning for two elements, which removes them from the pageflow and makes them occupy no space. The page layout doesn't see them and acts as if they are not there.

#Layer1 {
	position:absolute;
	top:150px;
	border-right-width: 0px;
	border-right-style: solid;
	border-right-color: #FF0000;
	width:220px;
	height:100%px;
	padding: 1em;
	background-color:;
	z-index:3;
}	

#mainImage {
	position:absolute;
	left:250px;
	top:65px;
	width:470px;
	height:135px;
	z-index:1;
}

#Layer3 {
	
border-right-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #FF0000;
	border-bottom-color: #FF0000;
	position: absolute;
	height:250px;
	width: 230px;
	left: 495px;
	top: 75px;
	padding: 1em;
	z-index:2;
	}
#LinkFree {
	border: thin solid #000000;
	background-color: #FFCC00;
	position: absolute;
	width:250px;
	left: 255px;
	top: 330px;
	padding: 1em;
	z-index: 4;
}
.mainpagestyle1 {
    font-size: 1.1em;
	color: #FF0000;
	font-weight: bold;

Also, you are missing the last closing },
and you have used HTML comments instead of CSS comments here:

.productListing-rowheading {
	background-color: #abbbd3;
	background-image: <!--url(../images/tile_back.gif)-->;
	height: 2em;
	color: #FFFFFF;
	}

should be

.productListing-rowheading {
	background-color: #abbbd3;
	background-image: /*url(../images/tile_back.gif)*/ none;
	height: 2em;
	color: #FFFFFF;
	}

It worked before because the error caused the line (or the whole rule for IE) to be ignored.

[rooisnor]

Thank you, I fixed the comment and last closing..

What should the positioning be? I tried 'fixed' but that didn't work either...

[rooisnor]

'Static' does help to keep the structure correct but then I lose the coordinates and the stacking order...