CSS Forum

**aadam** · 11-15-2011, 02:57 PM

I have a website and I'm struggling to get a duplicate div to show, can you help?

The CSS is;

HTML Code:

#box
{
	width:360px;
	height:400px;
	background-image:url(/test/box.png);
	background-repeat:no-repeat;
	padding:10px;
}
.link
{
	background-image:url(/test/box2.png);
	width:740px;
	height:130px;
	clear:both;
}

And the divs are here;

HTML Code:

    	<div id="box" class="link">
    	
    	
   	<iframe src="index.php" frameborder="0" scrolling="no" width="725px" height="200px" align="middle" style="margin-left:auto; margin-right:auto;"/>
  
	
	</div>
	<div id="box" class="link">
    	
    	
   	<iframe src="index.php" frameborder="0" scrolling="no" width="725px" height="200px" align="middle" style="margin-left:auto; margin-right:auto;"/>
  
	
	</div>

The second iframe is not showing, any ideas why?

**mgraphic** · 11-15-2011, 03:19 PM

I don't know if this is the cause for your issue, but something to keep in mind. Id's must be unique, html markup should never use the same id on multiple elements. CSS styles defined that are referenced by id (#) will supercede class style definitions.

**cyberdesignz** · 02:49 AM

it is not possible to create same name id for different div it should be unique but you can use class for applying style on different div.

this code really help you

<html>
<head>
<script type="text/css">

#box
{
background-image:url(/test/box.png);
background-repeat:no-repeat;
width:400px;
height:400px;
padding:10px;

}
.link
{
width:740px;
height:130px;
background-image:url(/test/box2.png);

}

#box1
{
background-image:url(/test/box.png);
background-repeat:no-repeat;
width:400px;
height:400px;
padding:10px;

}

</script>

</head>

<body>
<div id="box" class="link">

<iframe style="margin-left: auto; margin-right: auto;" src="text.html" width="725" height="200" frameborder="0" scrolling="no" ></iframe>

</div>

<div id="box1" class="link">

<iframe style="margin-left: auto; margin-right: auto;" src="ne.html" width="725" height="200" frameborder="0" scrolling="no" ></iframe>

</div>
</body>
</html>

**Physicsguy** · 12-16-2011, 09:36 AM

Or just use multiple classes...

Code:

.box{
	width:360px;
	height:400px;
	background-image:url(/test/box.png);
	background-repeat:no-repeat;
	padding:10px;
}
.link{
	background-image:url(/test/box2.png);
	width:740px;
	height:130px;
	clear:both;
}

Code:

    	<div class="box link">
    	
    	
   	<iframe src="index.php" frameborder="0" scrolling="no" width="725px" height="200px" align="middle" style="margin-left:auto; margin-right:auto;"/>
  
	
	</div>
	<div class="box link">
    	
    	
   	<iframe src="index.php" frameborder="0" scrolling="no" width="725px" height="200px" align="middle" style="margin-left:auto; margin-right:auto;"/>
  
	
	</div>