Side Window End is Chopped Off

[etidd]

Hello all,

I have yet another question pertaining to a problem I have for my World Review Group site.

The side windows I have brilliantly made into 3 slices and pieced together with CSS (stupid) is now displaying the end hanging off to the right side as I am putting in extra markup with the 2nd form for collecting e-mail addresses. When I am finding the right positioning for this 2nd form when it will be displayed in the center after the user originally enters their e-mail, the right window's end is chopped off the side. I tried the width of the container div, but that didn't seem to help. Maybe it has to do with the #rightside div.

This is the link to the screenshot of what I am seeing.

Markup:

<form id="emailbox" name="form1" method="post" action="?">
        <div>
          <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
          <input type="submit" value="Join" onclick="seeWhatHappened()" />
        </div>
      </form>
      <div id="rightsideend">&nbsp;</div>
      <!-- end side windows -->
      <div id="confirmform">
			<form name="form2" id="submissionform" method="post" action="?">
			<label for="confirmemail">Confirm your e-mail:<span>*</span></label>          
			<input type="text" name="confirmemail" class="fixedwidth" value="" maxlength="60"/><br />
			<label for="name">Enter your name:<span>*</span></label>
			<input type="text" name="name" class="fixedwidth" value="" maxlength="60" /><br />
			<label for="age">Select your age range:</label>
            <select name="age" class="fixedwidth">
               <option selected="selected">18&ndash;35</option>
               <option>36&ndash;55</option>
               <option>55+</option>
               <option>17 or younger</option>
            </select><br />
			<label for="country">Select your country:<span>*</span></label>
			<select name="country" class="fixedwidth">
            	<option selected="selected">Select</option>
				<option>United States</option>
			    <option>United Kingdom</option>
				<option>Canada</option>
				<option>Australia</option>
			    <option>Russia</option>
				<option>Brazil</option>
				<option>Somewhere else</option>
			</select><br />
			<input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkEmail()"/>
            <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
			</form>
      </div>

styles:

@charset "utf-8";
/* Home Page CSS Document */
body{
	background:url(bg2.jpg);
	background-position:top center;
	background-color:#999;
	margin:0 auto;
	overflow:hidden;
	font-family:Times "Times New Roman", Times, serif;
}

#container{
	height:1000px;
	width:1360px;
	overflow:visible;
	margin:0 auto;
	position:relative;
	z-index:7;
	background:url("homepagebgwinter.gif") repeat scroll 0% 200px transparent;
}

#leftside{
	position:absolute;
	top:405px;
	left:98px;
	width:auto;
}
	#leftsidestart{
		float:left;
		background:url("sidewindowstart.gif");
		width:27px;
		height:250px;
		margin:0;
	}
	#leftsidebody{
		margin:0 auto;
		float:left;
		background:url("sidewindowbody.gif") repeat-x;
		width:240px;
		height:250px;
	}
	#leftsideend{
		float:left;
		background:url("sidewindowend.gif");
		width:16px;
		height:250px;
		margin:0;
	}
	
#middle{
	width:626px;
	margin:0 auto;
}
#rightside{
	width:auto;
	position:absolute;
	top:405px;
	left:980px;
}
	#rightsidestart{
		background:url("sidewindowstartright.gif");
		float:left;
		width:27px;
		height:250px;
	}
	#rightsidebody{
		background:url("sidewindowbodyright.gif") repeat-x;
		float:left;
		margin:0 auto;
		width:247px;
		height:250px;
		position:relative;
	}
	#rightsideend{
		background:url("sidewindowendright.gif");
		float:right;
		width:15px;
		height:250px;
	}

h1{
	height:206px;
	width:626px;
	position:relative;
	padding:0;
	margin:0;
	text-align:center;
}
/* mac hide */
h1{overflow:hidden;}
/* end hide */
h1 span{
	background:url("header.jpg");
	position:absolute;
	left:0;
	top:0;
	display:block;
	height:206px;
	width:626px;
}

#body{
	background-image:url(body.jpg);
	width:626px;
	text-align: center;
	margin:0 auto;
}

#footer{
	background-image:url(footer.jpg);
	width:626px;
	height:30px;
	text-align: center;
	margin:0 auto;
	padding:0;
}

#welcomestatement{
	display:block;
	background-color:#FF9;
	text-align:left;
	padding:3px 20px;
	border-bottom:2px inset #F8CB87;
	margin:auto;
	width:400px;
	position:relative;
	top:10px;
	/*for IE*/
	filter:alpha(opacity=50);
	/*standard CSS3*/
	opacity:0.5;
}
p#welcomestatement{
	/*for IE*/
	filter:alpha(opacity=100);
	/*standard CSS3*/
	opacity:1;
	font-weight:bold;
}

.sideWindowHeaderText{
	font-size:18px;
	color:#000;
	font-weight:bold;
	width:200px;
	padding:1px 0 0 5px;
	/*text shadow*/
	text-shadow:0px 0px 6px #009, 2px 0px 12px #066;
}

#copytagatbottom{
	font-size:12px;
	text-align:center;
	color:#000;
	display:block;
	background-color:#FFF;
	width:200px;
	margin:0 auto;
	padding:2px;
	padding-bottom:4px;
	border:1px dashed #6B6B6B;
}

#emailbox{
	background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
	height:200px;
	width:156px;
	margin:0 0 0 8px;
	position:absolute;
	top:96%;
}
#go{width:80px; margin-top:165px; margin-left:12px;}

#confirmform{
	background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
	width:360px;
	height:200px;
	position:absolute;
	right:392px;
	top:130px;
}
#submissionform{
	padding:60px 10px 0 10px;
	text-align:left;
	z-index:999;
}
.fixedwidth{width:150px; float:right;}
#submissionform span{color:red;}

.formsubmitbutton{margin-left:50px; margin-top:10px;}

.sideWindowLinks li{
	list-style:disc;
	padding:3px 3px 3px 0;
	width:auto;
}
.sideWindowLinks li a{
	font-size:14px;
	font-weight:bold;
	color:#069;
}
.sideWindowLinks a:hover, .sideWindowLinks a:focus, .sideWindowLinks a:active{color:#09C; text-decoration:none;}

body{
	overflow:auto;
}

[ronpat]

Hi, etidd.

The bottom of your HTML page should look like this: (there were a few divs out of place in there somewhere.)

  <!-- begin side windows -->
  <div id="leftside">
    <div id="leftsideend">&nbsp;</div>
    <div id="leftsidebody">
      <h2 class="sideWindowHeaderText">Most Popular</h2>
      <ul class="sideWindowLinks">
        <li><a href="food/peapod1.html">Peapod</a></li>
        <li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
        <li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
      </ul>
    </div>
    <div id="leftsidestart">&nbsp;</div>
  </div>
  <!-- end leftside div -->
  <!-- begin rightside div -->
  <div id="rightside">
    <div id="rightsidestart">&nbsp;</div>
    <div id="rightsidebody">
      <h2 class="sideWindowHeaderText">Not Recommended</h2>
      <ul class="sideWindowLinks">
        <li><a href="#">Anthony Morrison&apos;s Big Profits Secret</a></li>
        <li><a href="#">Mobile Mass Media</a></li>
        <li><a href="#">Prorexin</a></li>
      </ul>
      <form id="emailbox" name="form1" method="post" action="?">
        <div>
          <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
          <input type="submit" value="Join" onclick="seeWhatHappened()" />
        </div>
      </form>
    </div>
    <div id="rightsideend">&nbsp;</div>
  </div>
  <!-- end side windows -->
  <div id="confirmform">
    <form name="form2" id="submissionform" method="post" action="?">
      <label for="confirmemail">Confirm your e-mail:<span>*</span></label>
      <input type="text" name="confirmemail" class="fixedwidth" value="" maxlength="60"/><br />
      <label for="name">Enter your name:<span>*</span></label>
      <input type="text" name="name" class="fixedwidth" value="" maxlength="60" /><br />
      <label for="age">Select your age range:</label>
      <select name="age" class="fixedwidth">
         <option selected="selected">18&ndash;35</option>
         <option>36&ndash;55</option>
         <option>55+</option>
         <option>17 or younger</option>
      </select><br />
      <label for="country">Select your country:<span>*</span></label>
      <select name="country" class="fixedwidth">
          <option selected="selected">Select</option>
          <option>United States</option>
          <option>United Kingdom</option>
          <option>Canada</option>
          <option>Australia</option>
          <option>Russia</option>
          <option>Brazil</option>
          <option>Somewhere else</option>
      </select><br />
      <input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkEmail()"/>
      <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
    </form>
  </div>
</div><!-- end container -->
<script type="text/javascript" src="Scripts/emailbox.js"></script>
</body>
</html>

You will also need to change a couple of values in css:

#confirmform{
    background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
    width:360px;
    height:200px;
    position:absolute;
    right:492px;      /* increased from  right:392px */
    top:530px;        /* increased from  top:130px */
}

You might also want to fix the font-family declaration in the body element. It's sorta broken.

body{
    background:url(bg2.jpg);
    background-position:top center;
    background-color:#999;
    margin:0 auto;
    overflow:hidden;
    font-family:Times "Times New Roman", Times, serif;
}

And I wonder why you added another body element at the bottom of the css sheet. Seems kinda odd.

body{
    overflow:auto;    /* ??? */
}

[etidd]

Hmm... yes, this was the solution.

Maybe I should comment on the divs so I don't lose track of them like I did here.

As for the font declaration, that's a weird error I made.

I don't know why that extra CSS was there for the body. That was dumb.

[ronpat]

etidd,

Your page has almost a hundred pixels of dead space on the outside edges of the side panels.

The following changes will reduce that dead space to zero, which means no horizontal scroll bar will be triggered prematurely. If you're interested....

#container{
    height:1000px;
    width:1171px;    /* was:  1360px */
    overflow:visible;
    margin:0 auto;
    position:relative;
    z-index:7;
    background:url("homepagebgwinter.gif") repeat scroll 0% 200px transparent;
}

#leftside{
    position:absolute;
    top:405px;
    left:0px;    /* was:  left:98px */
    width:auto;
}

#middle{
    width:626px;
    padding-right:7px;    /* ADDED */
    margin:0 auto;
}

#rightside{
    width:auto;
    position:absolute;
    top:405px;
    right:0px;    /* was:  left:980px */
}

#confirmform{
    background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
    width:360px;
    height:200px;
    position:absolute;
    right:400px;      /* decreased from:  right:492px */
    top:530px;
}