Le site Web comporte d'étranges espaces sur le côté droit de la page lorsque le navigateur est redimensionné dans une fenêtre plus petite

J'ai essayé tout ce que je pense, et pourtant rien ne semble résoudre le problème. Quand j'ai vue le site en plein écran (sur mon ordinateur), il semble bien, mais quand j'ai redimensionner le navigateur à une petite fenêtre, un très étrange espace blanc apparaît à droite de l'ensemble du contenu du site. Puisque certains éléments sont à 100% de largeur, je n'arrive pas à comprendre pourquoi cet espace blanc est primordial de ces éléments.

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;}

Le site: texte du lien

Je comprends le positionnement peut être non conventionnel et certains styles n'ont pas été utilisés, je suis encore dans le processus de l'élaboration du code inutilisé. Mais pour la vie de moi, je ne peux pas comprendre ça. Les captures d'écran ci-dessous:
![texte][2]

![texte][3]

source d'informationauteur Joe | 2011-01-06

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *