Use <div> tags in Product Info Page

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?

A link to see what you have done so far?

gjh42:

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!

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;

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.

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

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

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

Thank you, I've found a solution.

I added a table after the div tags, renamed the ID's and position (absolute) the layers according to the layout.

I see that those divs need absolute positioning so they can overlap. The best way to do that would be to give their container, #productDescription, a height and relative position. ```
#productDescription {
position: relative;
height: 345px; /adjust to taste/
}

Then the images and text will be positioned with respect to their immediate container, and the container will hold the right amount of space for them. The top and left properties will probably have to be adjusted to fit this. This eliminates any need for a layout table.