Hello, I am struggling to find a solution to a CSS problem. I have applied CSS styles to create border images for a div container, but the right image is not positioned correctly - it leaves space on the right side of the container when stretched out. Any ideas on how to fix this issue?
div#container{
position:relative;
margin-left:120px;
margin-right:120px;
float:top;
/*margin-top:-14px;*/
margin-bottom:50px;
/*border:2px solid #000;*/
width:auto;
height:100%;
}
ul#ulmenu{
padding-left:0;
list-style:none;
}
div#menus{
width:900px;
margin-top:7px;
margin-bottom:5px;
/*display:block;*/
}
ul#ulmenu li{
margin-top:15px;
float:left;
line-height:16px;
}
ul#ulmenu a{
margin-top:13px;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
font-weight:bold;
padding:8px;
border:2px solid #060;
background:#069;
color:#FFF;
}
ul#ulmenu a:hover, ul#ulmenu a:visited{
background:#09F;
color:#C06;
}
div#left-image{
position:absolute;
left:0;
width:28px;
height:100%;
float:left;
background:url(nios%20admin%20images/images/images/border-left.png) repeat-y;
}
div#right-image{
position:absolute;
display:compact;
right:0;
margin:0;
width:30px;
height:100%;
float:right;
background:url(nios%20admin%20images/images/images/border-right.png) repeat-y;
}
div#bottom{
position:absolute;
bottom:0;
width:100%;
/*border:2px solid #000;*/
height:36px;
z-index:100;
}
div#bottom-left{
width:51px;
height:36px;
background:url(nios%20admin%20images/images/images/corner-left.png) no-repeat;
float:left;
}
div#bottom-center{
height:36px;
background:url(nios%20admin%20images/images/images/bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}
div#bottom-right{
width:49px;
height:36px;
background:url(nios%20admin%20images/images/images/corner-right.png) no-repeat;
float:right;
margin-top:-36px;
}
div#main-containts{
position:absolute;
margin-right:30px;
left:25px;
right:30px;
padding:25px 10px;
text-align:center;
width:auto;}
div#data-containts{
/*position:absolute;*/
margin-top:50px;
padding-top:50px;
}
#container #main-containts #data-containts strong {
font-family: Tahoma, Geneva, sans-serif;
color: #C03;
font-size: 18px;
}
.msg {
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
color: #C06;
font-size: 18px;
}
div#workspace{
position:relative;}
</style>
</head>
<body>
<div id="workspace">
<div id="adminwrapper">
<div align="center">
<img src="images/adminbg-2.png" />
</div>
</div>
<div id="container">
<div id="left-image"></div>
<div id="main-containts" align="center">
<div id="menus">
<ul id="ulmenu">
<li><a href="index.php?act=admin_logout" >Logout</a></li>
<li><a href="javascript:void(0);" OnClick="c_pass()">Change-Password</a></li>
<li><a href="#" >Back-Up</a></li>
<li><a href="students.php?act=show_stud_rec" >Students</a></li>
</ul>
</div>
<div id="data-containts">
<span class="msg">{$msg}</span> </div>
<br/>
<p>
{$body_data}
</p>
</div>
<div id="right-image"></div>
<div id="bottom">
<div id="bottom-left"></div>
<div id="bottom-center"></div>
<div id="bottom-right"></div>
</div>
</div>
</div>
</body>
</html>