I create a website with a 1024 x 728 size. After I create the html amazingly, the horizontal space is more than 1024, larger than the background that I create. There are around 400 px more space to right side of the background which is filled with a blank white space ( I wonder why?).

I do not want to see horizontal scroll in my website only vertical scroll.

This is my whole website css.


body{background-image1:url('../images/indonusa3.jpg'); background-repeat: repeat-y; background-position: center top; height: 800px; }

#logo {margin: 10px 0 0 10px; }

#navigation {background-image:url('../images/nav.jpg'); background-repeat: repeat-x; width: 900px; height: 80px; z-index: 2; border-radius: 10px; border-style:solid; border-width: 1px; border-color: gray; margin-left: auto; margin-right: auto; margin-top: 50px;}

#search {margin: -45px 0 0 720px;}
input {width: 100px; height:30px;}
#sbutton {margin: -28px 0 0 827px;}

#slidesnav {margin-top: 400px; }

#products { margin: 50px 0 0 250px; }

#fnav {background-color: white; width: 900px; height: 50px; border-radius: 10px; border-style:solid; border-width: 1px; border-color: gray; margin-left: auto; margin-right: auto; margin-top: 20px;}

#fnav ul {list-style-type: none; margin:0; padding:0; text-align:right; margin-top:10px; margin-right:5px; }

#fnav ul li {display: inline; }

#fnav ul li a{text-decoration: none; color: black; font-family: arial; font-size: 11px; padding: .2em .5em;}

#fnav ul li a:hover{text-decoration: underline;}

/* special for slideshow navigation */

#slideshow { left: 35px; float: left; margin: 10px; z-index: 0;}
#nav { width: 270px; margin: 170px 0 0 225px; float: left; position: absolute; z-index: 1;}
#nav li { float: left; margin: 0 0 0 4px; list-style: none; background: url(../images/slidesnav1.jpg) no-repeat top;}
#nav a { width: 20px; height: 20px; padding: 0px; display: block; border: 0px solid #ccc;}
#nav li.activeSlide a { /* background: #88f */ background: url(../images/slidesnav2.jpg) no-repeat top;}
#nav a:focus { outline: none;}
#nav img { border: none; display: block;}
pre { clear: left }

/* end slideshow nav */
4 Years
Discussion Span
Last Post by touqeer s

ok, I did. I wonder why there is this around 400px blank white space on the right side of the body that I can't even trace it with css (firebug).


Unfortunately, it's not online yet. It's something beyond the body width. Since the firebug highlight on the body width is smaller than the whole screen.

I wonder what that is.


do you have the html available, maybe that'll help us find the problem?

Edited by <M/>


I think I find the part of the problem.


#cssmenu {padding: 0; margin: -50px 0 0 170px; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; } 
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;} 
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 2; /* width: 100%; */ } 
#cssmenu ul ul li {float: none; font-weight: normal;} 
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; } 
#cssmenu ul li:hover > ul { visibility: visible;} 
#cssmenu ul ul {margin-top: 0; bottom: 0; left: 0;} 
#cssmenu a { display: block; line-height: 2em; text-decoration: none; background-color: none; color: black; padding1: .5em 1em; padding: .5em 0em; font-family: arial; font-size:16px;} 
#cssmenu a:hover{ display: block; line-height: 2em; text-decoration: none; background-color: white; color: black; padding1: .5em 1em; padding: .5em 0em;font-family: arial;font-size:16px;} 

#cssmenu .onelayer{background-color: #c4f8f3; padding1: .5em 1em;} 
#cssmenu .onelayer a:hover{background-color: white; padding1: .5em 1em;}


<link href= "css/nav.css" rel="stylesheet" type="text/css" media="screen">

<div id="navigation">

<div id="logo"><img src="images/logo2.png" width="160" height="60"></div>

<div id='cssmenu'>
     <li class='active'><a href='index.php'>|    Home    |</a></li>
     <li class='has-sub'><a href='index.php'>    Product & Services    |</a>
           <li class='onelayer'><a href='connection.php'>    Connection       ></a>
                 <li class='onelayer'><a href='fo.php'>    Fiber Optic</a></li>
                 <li class='onelayer'><a href='wireless.php'>    Wireless</a></li>
           <li class='onelayer'><a href='collaboration.php'>    Collaboration         ></a>
                 <li class='onelayer'><a href='cloud.php'>    Cloud</a></li>
                 <li class='onelayer'><a href='email.php'>    Email</a></li>
                 <li class='onelayer'><a href='vcon.php'>    VCON</a></li>
                 <li class='onelayer'><a href='sharepoint.php'>    Sharepoint</a></li>
                 <li class='onelayer'><a href='crm.php'>    CRM</a></li>
                 <li class='onelayer'><a href='voip.php'>    Voice</a></li> 
           <li class='onelayer'><a href='solution.php'>    Solution         ></a>
                 <li class='onelayer'><a href='network.php'>    Network Solution</a></li>
                 <li class='onelayer'><a href='system.php'>    System Solution</a></li>
                 <li class='onelayer'><a href='surveillance.php'>    Surveillance</a></li> 
     <li><a href='agent.php'>    Agent    |</a></li>
     <li><a href='aboutus.php'>    About Us    |</a></li>
     <li><a href='contactus.php'>    Contact Us    |</a></li>

<div id="search">
<input type="text" name="search"></div>
<div id="sbutton"><img src="images/search button.jpg"></div>


It's in :

#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 2; /* width: 100%; */ } 

The part that I comment out:
/* width: 100%; */

If I include width: 100%; then, the horizonal scroll start appearing around 400 px larger to the right. Yet the navigation dropdown appears perfect.

If I comment out " width: 100% ", then the navigation appears imperfect (like in the link below) eventhough the horizontal scroll disappeared.


Any other idea to fix this?


The deal is the background scretch larger than the wallpaper, If I include width: 100%;

If take the code off then, the navigation size start going into chaos just like the link above.

Edited by davy_yg


Nevermind, I use the exact width size, instead of percentage.

width: 170px;

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.