Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Website has strange whitespace on right side of the page when the browser is resized to a smaller window

Tags:

css

xhtml

I've tried everything I can think of, yet nothing seems to fix the issue. When I view the website at full-screen (on my computer), it appears fine, however when I resize the browser to a smaller window, a very strange white space appears to the right of all the website content. Since some elements are set to 100% width, I can't seem to figure out why this white space is overriding those elements.

HTML:

<body> 
<div id="bar"> 
 <div id="linkarea"> 
     <ul> 
         <li><a href="index.php">Home</a></li> 
      <li><a href="register.php">Register</a></li> 
               <li><a href="explore.php">Explore</a></li> 
            <li><a href="newtopic.php">New Debate</a></li> 
            <li><a href="contact.php">Contact</a></li> 

    </div> 
</div><div id="sky"> 
 <div id="cloud"></div> 
 <div id="cloud2"></div> 
 <div id="cloud3"></div> 
 <div id="cloud4"></div> 
    <div id="cloud5"></div> 
 <div id="cloud6"></div> 
 <div id="cloud7"></div> 
 <div id="cloud8"></div> 
</div> 
<div id="contenttop"></div><div id="container"> 
  <img src="images/cloud0.png" id="cloud0" alt="TelUsY"  /> 
  <img src="images/logo1.png" id="logo" /> 
  <img src="images/plane.png" id="plane" alt="TelUsY"  /> 

               <div id="userinfob"> 
   <span id="logintext"> 
   <form name="loginform" id="loginform" method="POST" action="/beta/index.php"> 
   <input type="text" class="styled_login" name="access_login" id="loginface" value="username..."> 
   <input type="password" class="styled_login" name="access_password" id="pwface"> 
   <a class="button" id="loginbutton" href="#"><span>Login!</span></a></span> 
   </form> 
   <br> 
   <a href="password_recovery.php" class=>Forgot your password?</a> 
            </div> 
         <div id="content"> 
 <div id="container_top"> 
  <!-- Include Top Container Content --> 
     <center> 
   <form action="search.php" method="get" id="thesearch"> 
   <table id="search" cellpadding=0 cellspacing=5 border=0> 
    <tr> 
     <td class="searchbar"> 
      <!-- Search Box --> 
      <input type="text" name="query" size="20" value="Search..." class="search_field_out" id="searchbg" onFocus="changeOnFocus();" onBlur="changeOnBlur();"> 
     </td> 
     <td class="searchbar" align="left"> 
      <!-- Submit Button --> 
      <input type="image" src="images/search_icon2.gif" name="submit_search" id="submitbutton" onMouseOver="hoverButton();" onMouseOut="outButton();"> 
     </td> 
    </tr> 
          </td> 
     </tr> 
   </table> 
   </form> 
   </center> </div> 
<div id="leftcontent"> 
         <a href="register.php"><img class="imgleft" src="images/1reg.png" /></a> 
            <div class="txtright">Registration is simple, and takes less than 5 minutes. Without an account, you will be able to view current debate topics, however you won't be able to share your opinion. <a href="register.php">Click here to sign up</a>, and begin using all the features of the TelUsY service now. </div> 
            <a href="explore.php"><img class="imgleft" src="images/2explore.png" /></a> 
            <div class="txtright">Once you have an account, you can begin browsing through current debates by choosing a category, or searching for a more specific word or phrase with the search bar. You can also find recent popular topics on the Explore page.</div> 
            <a href="newtopic.php"><img class="imgleft" src="images/3debate.png" /></a> 
            <div class="txtright">Once you've found a topic that you find interesting, feel free to post your opinion by clicking on either the red or green box. If you agree or disagree with an opinion, but don't want to post a counter-argument simply click on either the red or green icon to cast your vote on that topic.</div> 
        </div> 
        <div id="rightcontent"> 

  <h2>Popular Debates</h2> 
        <ol> 
     <a href="view.php?topic=zIG1294266765NV"><li>Arsenal should have defeated Mancheste...</li></a> 
      <a href="view.php?topic=iRr1294268603PF"><li>The Ricky Gervais show is absolutely h...</li></a> 
      <a href="view.php?topic=hed1294268314uo"><li>Starcraft 2 is one of the best online ...</li></a> 
      <a href="view.php?topic=eGX1294268407ow"><li>President Barack Obama should be doing...</li></a> 
      <a href="view.php?topic=vLA1294268494sG"><li>Macaroni Grill is one of the best Ital...</li></a> 
           </ol> 
        <h2>Recent Debates</h2> 
        <ol> 
     <a href="view.php?topic="><li>dsnfkldsj fklsdf j sdlkfjdsfklj sdfkld...</li></a> 
      <a href="view.php?topic="><li>The Miami heat shouldn't be hated on f...</li></a> 
      <a href="view.php?topic="><li>More Americans should limit their fast...</li></a> 
      <a href="view.php?topic="><li>The Ricky Gervais show is absolutely h...</li></a> 
      <a href="view.php?topic="><li>Macaroni Grill is one of the best Ital...</li></a> 
           </ol> 
        <h2>Categories</h2> 
        <ul> 
    <a href="search.php?category=1"><li>Sports</li></a> 
    <a href="search.php?category=2"><li>Food</li></a> 
    <a href="search.php?category=3"><li>Games</li></a> 
    <a href="search.php?category=4"><li>Business</li></a> 
    <a href="search.php?category=5"><li>Politics</li></a> 
    <a href="search.php?category=6"><li>Technology</li></a> 
    <a href="search.php?category=7"><li>Television</li></a> 
    <a href="search.php?category=8"><li>Music</li></a> 
    <a href="search.php?category=9"><li>Health</li></a> 
    <a href="search.php?category=10"><li>Home & Garden</li></a> 
          </ul>        </div>        <div id="footer"><div id="footerarea"> 
Copyright 2010 TelUsY. All rights reserved.<br /> 
<a href="index.php">Home</a> |
<a href="register.php">Register</a> |
<a href="explore">Explore</a> |
<a href="newtopic.php">New Debate</a> | 
<a href="contact.php">Contact</a> 
</div></div>    </div> 
</div> 
<div id="bad_login" title="Login Unsuccessful" class="dialog" style="display:none"><center> 
The username and password you entered did not match our records.<br><a href="#" onclick="closeME('bad_login');">Close this box and try again</a>.
<br><br> 
If you don't have an account yet, register today! It's fast, easy, and free.<br> 
<a href="register.php">Create an account now!</a> 
</div></body>

CSS:

@charset "utf-8";
/* CSS Document */

@font-face {
 font-family: 'CoolveticaRegular';
 src: url('../fonts/coolvetica_rg_0-webfont.eot');
 src: local('☺'), url('../fonts/coolvetica_rg_0-webfont.woff') format('woff'), url('../fonts/coolvetica_rg_0-webfont.ttf') format('truetype'), url('../fonts/coolvetica_rg_0-webfont.svg#webfonthn4Mp3Kg') format('svg');
 font-weight: normal;
 font-style: normal;
}

html, body, div, h1, h2, h3, ul, ol, li, form, fieldset, input, textarea {margin: 0; padding: 0; font-size: 100%;}
img {border:none;}
a {border:none;}
html {width:100%;}
body {background-color:#FFF; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size:12px; width:100%;}
#container {width:1024px; margin:0pt auto; text-align:center; position:relative; clear:both; z-index:10;}
#logo {position:absolute; z-index:10; top:20px; left:35px;}
#userinfoa {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:20px;}
#userinfoa a {border:none; color:#FFF;}
#userinfoa a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfoa a:active {border:none; color:#FFF;}
#userinfob {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:15px;}
#userinfob a {border:none; color:#FFF;}
#userinfob a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfob a:active {border:none; color:#FFF;}
#bar {height:42px; width:100%; background-image:url(../images/bar.png); background-repeat:repeat-x; z-index:2; overflow:visible; min-width:100%;}
#sky {height:312px; width:100%; position:absolute; background-color:#5ba2ca; z-index:1; clear:both; overflow:visible; min-width:100%;}
#contenttop {height:166px; width:100%; position:absolute; top:271px; background-image:url(../images/cloudt.png); background-position:top left; background-repeat:repeat-x; z-index:2; overflow:hidden;}
#cloud0 {position:absolute; left:0px; top:0px; z-index:5;}
#cloud {position:absolute; top:110px; left:0%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud2 {position:absolute; top:170px; left:15%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud3 {position:absolute; top:100px; left:30%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud4 {position:absolute; top:50px; left:45%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#cloud5 {position:absolute; top:20px; left:60%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud6 {position:absolute; top:70px; left:90%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud7 {position:absolute; top:130px; left:75%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud8 {position:absolute; top:115px; left:85%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#content {position:absolute; top:325px; left:0px; background-color:#FFF; clear:both; width:100%; padding:20px 20px 0 20px; z-index:100;}
#mainnode {position:relative; width:578px; height:168px; background-color:#e7f5fe; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both;}
#maincontent {position:absolute; width:538px; left:20px; top:35px; height:110px; font-size:14px; text-align:left; color:#04436a; overflow:auto;}
#parentnode {position:relative; text-decoration:none; width:350px; height:125px; background-color:#e7f5fe; color:#04436a; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
.nodecontent {position:absolute; width:310px; left:20px; top:35px; height:80px; font-size:14px; text-align:left; overflow:hidden;}
#childnodel {position:relative; width:350px; height:125px; background-color:#b6df8e; color:#3b781d; border:1px solid #25520f; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#childnoder {position:relative; width:350px; height:125px; background-color:#f08d97; color:#902217; border:1px solid #521711; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#agreebtn {position:absolute; bottom:-27px; left:-27px;}
#disagreebtn {position:absolute; bottom:-27px; right:-27px;}
#percents {width:100%; position: absolute; bottom:2px; color:#04436a; text-align:center; margin:0 auto; font-size:16px;}
.red {color:#a61c28;}
.green {color:#72b332;}
#postinfomain {width:538px; position: absolute; left:20px; top:5px; color:#04436a; text-align:center; margin:0 auto; font-size:14px; }
#postinfomain hr {border:0px solid #04436a; height:1px; background-color:#04436a;}
.postinfo {width:310px; position: absolute; left:20px; top:5px; text-align:center; margin:0 auto; font-size:14px; }
#parentnode hr {border:0px solid #04436a; height:1px; background-color:#04436a}
#parentnode a {text-decoration:none; color:#04436a;}
#childnodel hr {border:0px solid #04436a; height:1px; background-color:#3b781d;}
#childnodel a {color:#3b781d; text-decoration:none;}
#childnoder a {color:#902217; text-decoration:none;}
#childnoder hr {border:0px solid #04436a; height:1px; background-color:#902217;}
.rightpost {float:right; font-style:italic;}
.rightpost_votes {float:right; font-weight:bold; padding-right:25px; color:red;}
.leftpost {float:left; font-weight:bold; }
.leftpost_votes {float:left; font-weight:bold; padding-left:25px; color:green;}
#plane {position:absolute; top:35px; right:0px; z-index:3;}
#linkarea {height:40px; width:100%; margin:0 auto; min-width:1024px; position:relative; float:left;}
#linkarea a {font-family:CoolveticaRegular, Georgia, serif; color:#FFF; font-size:18px; text-decoration:none;}
#linkarea a:hover {font-family:CoolveticaRegular, Georgia, serif; color:#FC3;}
#linkarea a:active {font-family:CoolveticaRegular, Georgia, serif; color:#FFF;}
#linkarea ul {list-style-type:none; text-align:center; padding-top:14px; text-align:center; float:left; position:relative; left:50%;}
#linkarea ul li {float:left; display:block; right:50%; position:relative; padding:0 60px 0 60px;}
#footer {height:100px; width:1024px; margin:0 auto; background-image:url(../images/footer.png); color:#FFF; clear:both; text-align:center;}
#footer a {color:#FFF;}
#footerarea {padding-top:40px;}
#leftcontent {width:593px; padding:20px 0 20px 20px; float:left; text-align:left; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent ul li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent ol li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent a:hover {color:#999;}
#rightcontent a {color:#04436a;}
#leftcontent a:hover {color:#999;}
#leftcontent a {color:#04436a;}
#rightcontent {width:371px; padding:20px; float:right; text-align:left; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent h2 {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#04436a; font-size:24px; line-height:18px; padding-bottom:15px; padding-top:15px;}
#searchbg {width:300px; height:48px; display:block; border: 0;}
.imgleft {float:left; clear:both; width:212px; height:190px;}
.txtright {float:left; padding:12px 0 20px 20px; width:356px; font-size:18px; height:190px;} 
.txtright a {color:#999; text-decoration:none;}
.txtright a:hover {color:#ccc;}
a.button {margin-top:3px; margin-left:2px; background: transparent url('../images/button_a.png') no-repeat scroll top right; color: #FFF; display: block; float: left; font: normal 14px Georgia, serif; height: 25px; 
padding-right: 5px; /* sliding doors padding */ text-decoration: none;}
a.button span {color: #FFF; background: transparent url('../images/button.png') no-repeat; display: block; line-height: 16px; padding: 0 5px 5px 9px;}
.pusher {padding-bottom:105px;}

The website: link text

I understand the positioning may be unconventional and some styles haven't been used, I'm still in the process of working out the unused code. But for the life of me, I can't figure this one out. Screenshots below: ![alt text][2]

![alt text][3]

like image 782
Joe Avatar asked Jan 06 '11 06:01

Joe

People also ask

Why is there white space at the right of my webpage?

It greatly depends on how your website is designed. If it's a very simple layout, you might have used “text-align: right;” which left more space on the left. If you're using a grid layout, you may have put your content in the columns to the right.

How do I get rid of extra spaces on my website?

HTML. Approach 2: We can also eliminate the extra space using the margin-top property. The margin-top property sets the top margin of an element. When we use margin-top we have to apply it on the tag, such that we have to eliminate extra space above it.

1 Answers

Try 

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

and delete rules one by one until you identify which rule removes the whitespace.

This is really only disguising the layout problem, not addressing it. Try inspecting the gap with your browser dev tools and see if it identifies an element other than html or body. It could be some kind of margin applied to an element on the horizontal edge of the layout; CSS margins work "through" parent elements and can offset from the page edge itself, in some cases.

Idea from here.

like image 183
iono Avatar answered Oct 20 '22 03:10

iono
Sign in to Comment

Related questions

Compass and Sass are dead?
How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?
How to detect window size and then do something with jquery switch statement
Height of outer div not expanding with inner div
Windows 8 preloader (loading icon) using HTML5 and javascript without images
Radio button causes browser to jump to the top
Column ordering in Bootstrap 4 with push/pull and col-md-12
Why is my .sticky-top class not working in Bootstrap 4?
Preventing images and text to be selected
jQuery css min-height
The "before" pseudo element not working in Font awesome v.5
How to change CSS class of a HTML page element using ASP.NET?
CSS Select Images with style="float:left" possible?
Make whole <li> as link with proper HTML
How to format background color using twitter bootstrap?
Change Font Awesome icon on :hover
CSS which takes precedence, inline or the class?
Css3 calc minus vh with pixel [duplicate]
Color "transparent" not working
jQuery is not defined twitter bootstrap

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!