PDA

View Full Version : how to remove Unwanted space on the right hand side



vai24shinde
Jan 8th, 2011, 07:24 PM
CSS
* {padding:0; margin:0;}

body {
padding:0; margin:0;
font:11px Tahoma;
color:#434343;
width: auto;

}
img {behavior:url("pngbehavior.htc"); border:none;}
h1 {font:bold 16px Verdana;}
h3 {font:bold 16px "Trebuchet MS"; color:#323232; line-height:25px; text-indent:20px;}
p { font:12px Tahoma; padding:7px 0;}
.text {padding:0 20px;}

a {font:12px Arial; color:#99ba00; text-decoration:underline;}
a:hover {text-decoration:none;}

img {text-decoration:none;}

#header1_bg {
width:100%;
height:73px;
background: white;}
#header1 {

width:900px;
height:73px;
margin:0 auto;
color: white;}

#navigation{
position:relative;
top:43px;
width:100%;
height:30px;}
#menu {

font: 12px Tahoma;
height:30px;
margin:0 auto;
line-height:30px;
color:#99ba00;}
#menu li {
width:111px;
height:30px;
list-style-type:none;
float:left;
text-align:center;
background:url() no-repeat;}
#menu li:hover {background:url() no-repeat;}
#menu a {
height:30px;
text-decoration:none;
color:#99ba00;}
#menu a:hover {
color: #000;
text-decoration:underline;}




#header2_bg {
width:100%;
height:261px;
background: url() repeat-x;}
#header2 {
width:900px;
height:261px;
margin:0 auto;
position:relative;}

#header2_left {
position:absolute;
top:0; left:0;
width:223px;
height:100px;}

#menu2 {margin-top:30px; border-top:solid 1px #bfbfbf;}
#menu2 li {
width:223px;
height:31px;
text-indent:25px;
list-style-type:none;
background:url() no-repeat;}
#menu2 li:hover {background:url() no-repeat;}
#menu2 a {
font:12px Arial;
color:#434343;
line-height:31px;}
#menu2 a:hover {color:#99ba00; text-decoration:none;}

#header2_right {

position:absolute;
top:0; right:0;
width:677px;
height:242px;
background:url() no-repeat right;}


#header2_right_box{
position: absolute;
top: 20px; right: 325px;
width: 310px;
height: 200px;
background:url() no-repeat right;
z-index: 2;
}



#header2_right_box1{
position: absolute;
top: 20px; right: 0px;
width: 310px;
height: 200px;
background:url() no-repeat right;
z-index: 2;
}




#header2_right_content{

position: inherit;
top:0px;
left:50px;
padding: 0 0 0 0px;

}


#header2_right_content h1{font:bold 16px "Book Antiqua", sans-serif; color:white; padding:30px 00px 10px 0px;}
#header2_right h2 {font:bold 16px "Trebuchet MS", sans-serif; color:#849d0e; padding:30px 10px 10px 30px;}
#header2_right p {font:12px Verdana; padding:0 30px; width:370px;}
#header2_right a {color:white; text-decoration:underline;}
#header2_right a:hover {text-decoration:none;}


#header2_right_content1{

position: inherit;
top:0px;
left:150px;
padding: 0 0 0 0px;
}


#header2_right_content1 h1{font:bold 16px "Book Antiqua", sans-serif; color:white; padding:30px 0px 0px 0px;}

#main_bg {
width:100%;
height:100%;
background:#434343;}
#main {
width:900px;
height:100%;
margin:0 auto;}

#left {
display:inline;
float:left;
width:223px;
height:100%;}

.cat {
width:223px;
height:25px;
background:url() no-repeat;}


#left li {
width:223px;
height:28px;
display:block;
text-indent:24px;
list-style-type:none;
background:url() no-repeat;}
#left a {
color:#fff;
line-height:28px;}

.box {
width:100%;
background:url() no-repeat bottom;
color:#fff;}
.box1 { padding:0 10px 5px 10px;}
.data {color:#99ba00;}


#right {
display:inline;
float:right;
width:677px;}

#content {
position: absolute;
width:100%;
height: auto;
margin-left:15px;
background:url() repeat-y ;}
#cont_top {
width:662px;
height:16px;
background:url() no-repeat;}

#cont_bot {
width:662px;
height:16px;
margin-left:15px;
background:url() no-repeat;}

#content img {padding-left:3px;

}

#header2_bottom_box{
float: left;
position: relative;
width: 197px;
height: 172px;
padding: 0px 0px 10px 10px;
margin: 5px 0px 5px 5px;
background:url() no-repeat left;
z-index: 2;
}

#header2_bottom_content{

position: inherit;
top:0px;
padding-left:10px;
}

#header2_bottom_content td{background-image: url (''); background-repeat: no-repeat; background-position: center;}

#header2_bottom_content h1{font:bold 16px "Book Antiqua", sans-serif; color:white; padding:30px 0px 10px 0px;}


#header2_bottom_box1{
float: left;
position: relative;
width: 197px;
height: 172px;
padding: 0px 0px 10px 10px;
margin: 5px 0px 5px 5px;
background:url() no-repeat left;

}
#header2_bottom_content1{

position: inherit;
top:0px;
padding-left:15px;
left:180px;

}

#header2_bottom_content1 h1{font:bold 16px "Book Antiqua", sans-serif; color:white; padding:15px 0px 10px 0px;}
#header2_bottom_content1 h2{font:bold 16px "Book Antiqua", sans-serif; color:white; padding:15px 0px 10px 20px;}
#header2_bottom_content2{

position: inherit;
top:0px;
padding-left:15px;
left:180px;

}

#header2_bottom_content2 h1{font:bold 16px "Book Antiqua", sans-serif; color:white; padding:15px 0px 10px 20px;}












html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<titleBusiness 7</title>
<link rel="stylesheet" type="text/css" href="style_final.css" />

</head>

<body>


<div id="header1_bg"><div id="header1">
<a href="index.html"><img src="" alt="" width="100%" height="73" align="left" /></a>
<div id="navigation">

</div>
</div></div>

<div id="header2_bg"><div id="header2">
<div id="header2_left">
<ul id="menu2">
<li><a href="#">Home</a></li>
<li><a href="" TARGET="_blank">Verticals</a></li>
<li><a href="" TARGET="_blank">O</a></li>
<li><a href="#" TARGET="_blank">R</a></li>
<li><a href="#" TARGET="_blank">Contact Us</a></li>
<li><a href="#" TARGET="_blank">Voice of Customer</a></li>
<li><a href="#" TARGET="_blank">Help</a></li>
</ul>
</div>

<div id="header2_right_box">
<div id="header2_right_content">
<table width="100%" cellpadding="2" cellspacing="0" align="left" >

<tr height="20">
<td align="center"><h1>Knowledge Center</h1></td>
</tr>

<tr HEIGHT="30">
<td align="center"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">Initiative </font></a></td>

</tr>
<tr HEIGHT="30">
<td align="center"><a href="" TARGET="_blank"><font size="2">Service</font></a></td>

</tr>
<tr HEIGHT="30">
<td align="center"><a href="" TARGET="_blank"><font size="2">Tranining</font></a></td>


</table>
</div>
</div>

<div id="header2_right_box1">
<div id="header2_right_content1">
<table width="100%" cellpadding="2" cellspacing="2" align="LEFT" >

<tr height="20">
<td align="center"><h1>Center</h1></td>
</tr>
<tr>
<td align="center"><a href="1" TARGET="_blank"><img src=""/></a></td>
</tr>


</table>

</div>

</div>







</div></div>

<div id="main_bg"><div id="main">

<div id="left">



<div class="cat"><h3>Planned</h3></div>
<ul>
<li><a TARGET="_blank" href="">January 2011</a></li>
<li><a TARGET="_blank" href="">Februaury 2011</a></li>
<li><a TARGET="_blank" href="">March 2011</a></li>
<li><a TARGET="_blank" href="">April 2011</a></li>
<li><a TARGET="_blank" href="">May 2011</a></li>
<li><a TARGET="_blank" href="">June2011</a></li>
</ul>


<div class="cat"><h3>Notifications</h3></div>
<div class="box">
<div class="box1">
<p class="data"></p>
<p></p>
</div></div>


<div class="box">
<div class="box1">
<p class="data"></p>
<p></p>
</div></div>


<div class="box">
<div class="box1">
<p class="data"></p>
<p></p>
</div></div>

</div>

<div id="right">

<div id="content">
<div id="header2_bottom_box">
<div id="header2_bottom_content1">
<table width="100%" cellpadding="2" cellspacing="2" align="center" >

<tr height="20">
<td colspan="2" align="left"><h1>Verticals</h1></td>
</tr>

<tr HEIGHT="20">
<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">C</font></a></td>

<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">H</font></td>
</tr>
<tr HEIGHT="20">
<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">C</font></a></td>

<td align="left" ><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">I</font></td>
</tr>
<tr HEIGHT="20">
<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">Dinner</font></a></td>

<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">L</font></td>

</table>

</div>

</div>

<div id="header2_bottom_box">
<div id="header2_bottom_content1">
<table width="100%" cellpadding="2" cellspacing="2" align="left" >

<tr height="20">
<td align="left"><h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CSS Reports</h1></td>
</tr>

<tr>
<td align="LEFT"><a href=""><img src=""/></a></td>
</tr>


</table>
</div>
</div>

<div id="header2_bottom_box">
<div id="header2_bottom_content1">
<table width="100%" cellpadding="2" cellspacing="2" align="left" >

<tr height="20">
<td align="left"><h1>Value Added Services</h1></td>
</tr>

<tr HEIGHT="30">
<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">BO COE </font></a></td>

</tr>
<tr HEIGHT="30">
<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">SC COE</font></a></td>

</tr>
<tr HEIGHT="30">
<td align="left"><a href="" style="text-decoration:none" TARGET="_blank"><font size="2">COG QA</font></a></td>


</table>
</div>
</div>

</div>





</div>

<div style="clear:both"></div>
</div></div>




</body>
</html>

Excavator
Jan 8th, 2011, 07:34 PM
Hello vai24shinde,
Welcome to codingforums.com!

You should check the width on #content.

You should also have a look at every link in my signature line.