Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Extra space on right side of pages

Posted by: poonchy722 May 16 2012, 11:30 PM

Hi everyone.

I built a fairly simple website for a friend of mine who owns a warehouse, and everything seems to be working perfectly on the site, except for one minor issue - there is a bunch of extra space on the right side of all the pages.

You can see what I am talking about if you visit the site - kakllc.com (scroll to the right to see the extra space)

Here is the html for the home page:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>K.A.K. Warehouse - Home Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
        <link href="KAKHeaderFooterStyles.css" rel="stylesheet" type="text/css" />
        <link href="KAKHomePageStyles.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <div id="siteOuterBackground">
    <div id="siteInnerBackground" style="height: 1530px;">

        
        <div>
        <img width="902px" src="Images/TopBannerWeb.jpg" alt="KAK Warehouse Banner" usemap="TopBannerHomePageLink" />
        </div>
        <map name="TopBannerHomePageLink">
            <area shape="rect" coords="25,5,225,190" href="KAKSite.html" />
            <area shape="rect" coords="423,170,783,192" href="http://maps.google.com/?q=1507%20S.%20Olive%20St.%20South%20Bend,%20IN%2046619" />
        </map>

        
        <ul id="navMenuHead">
            <li><a class="navMenuHeadLink" id="homeHead" href="KAKSite.html" style="background-position: 0 -62px;">Home</a></li>
            <li><a class="navMenuHeadLink" id="servicesHead" href="KAKServicesPage.html">Services</a></li>
            <li><a class="navMenuHeadLink" id="ftz125Head" href="KAKFTZ125Page.html">FTZ #125</a></li>
            <li><a class="navMenuHeadLink" id="aboutHead" href="KAKAboutUsPage.html">About Us</a></li>
            <li><a class="navMenuHeadLink" id="contactHead" href="KAKContactPage.html">Contact</a></li>
        </ul>

        
        <div id="lowerBannerDiv">
        <img width="902px" src="Images/LowerBannerWeb.jpg" alt="KAK Warehouse Lower Banner" id="lowerBannerImage" />
        </div>


        
        <div id="kakIs">
            <img src="Images/KAKLLCIs.jpg" alt="KAK Warehouse Is..." />
        </div>
        <div>
            <p class="homePageContent" id="homePageContent1">
            � a public/contract warehouse located in South Bend, Indiana since 1994. The operations are tailored to meet each customer's specific needs for packaging, storing and/or distribution of goods.
            <br />
            <br />
            Located in a Foreign Trade Zone, value adding services are always available, from labeling or crating to assembly work. With over 60 years combined management experience in warehousing, import, export, packing and logistic management, no project is too large or too small for K.A.K.
            <br />
            <br />
            K.A.K. LLC will offer a secure environment for all of your products with an electronic security system and a thirteen zone sprinkler system throughout the building. K.A.K. is located near the SR 23 exit of the US 20/31 bypass, with quick and easy access to and from the warehouse.
            </p>
        </div>
        <div id="eagleEye">
            <img class="shadow" src="Images/EagleEyeWeb.jpg" alt="KAK Warehouse overhead view" width="400" />
        </div>
        <div id="interior">
            <img class="shadow" src="Images/HomePageImages/HomeLeftWeb.jpg" width="391" alt="KAK Warehouse interier view" />
        </div>
        <div id="kakOffers">
            <img src="Images/WhatWeOffer.jpg" alt="What KAK Warehouse has to offer..." />
        </div>
        <div>
            <ul id="kakOffersList">
                <li>- 355,000 sq. ft. under one roof</li>
                <li>- Conrail Rail Siding/Norfolk Southern</li>
                <li>- Rail Doors up to 20 ft. wide</li>
                <li>- 25 Truck Dock Doors</li>
                <li>- Heavy Lifts up to 15,000 lbs.</li>
                <li>- Office Space Available</li>
                <li>- Production Space</li>
                <li>- 480 and 240/120 Power</li>
                <li>- Climate Controlled Work Rooms</li>
            </ul>
        </div>

        <div id="ftzImage">
            <a href="KAKFTZ125Page.html" alt="K.A.K. Warehouse FTZ125 Page" id="FTZ125LinkImage">FTZ 125</a>
        </div>

        <div id="iwlaLogo">
            <a href="http://www.iwla.com" id="iwla">IWLA</a>
        </div>



        
        <ul id="footerMenu" style="position: relative; top: -550px;">
            <li><a class="footerMenuLink" id="ftz125Foot" href="KAKFTZ125Page.html">FTZ #125</a></li>
            <li><a class="footerMenuLink" id="iwlaFoot" href="http://www.iwla.com">International Warehouse Logistics Association</a></li>
            <li><a class="footerMenuLink" id="aboutFoot" href="KAKAboutUsPage.html">About Us</a></li>
            <li><a class="footerMenuLink" id="contactFoot" href="KAKContactPage.html">Contact</a></li>
        </ul>

        <img src="Images/FooterBanner.jpg" width="902px" alt="K.A.K. Warehouse Footer Banner" style="position: relative; top: -552px;" usemap="FooterBannerLinks" />
        <map name="FooterBannerLinks">
            <area shape="rect" coords="375,47,470,68" href="KAKSite.html" />
            <area shape="rect" coords="764,94,902,113" href="http://www.watchtowerhosting.com/"
        </map>

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

</html>

And here is the code for the two stylesheets that are linked to the home page (the first style sheet is linked to all pages):

CODE

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

/*Style for drop shadows*/
.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

/*Style for Lower Banner*/
div#lowerBannerDiv
{
    height: 204px;
}

img#lowerBannerImage
{
    position: relative;
    top: -16px;
}

/*Styles for grey outlining background*/

body
{
    background-color: #5B5A56;
}

div#siteOuterBackground
{
    padding-top: 0px;
    padding-bottom: 300px;

    background-color: #5B5A56;
    width: 902px;
    margin: 0 auto;
    text-align: left;
}

div#siteInnerBackground
{
    width: 902px;
    background-color: #FFFBFF;
    margin: 0px;
    border: 1px;
    padding: 0px;
}

/*Styles for navigation menu*/
ul#navMenuHead
{
    width:902px;
    list-style:none;
    position: relative;
    top: -16px;
    left: -40px;
}
a.navMenuHeadLink
{
    display: block;
    float: left;
    height: 62px;
    background-image: url(Images/KAKMenuWeb.jpg);
    text-indent: -9999px;
}
a#homeHead
{
    width: 162px;
    background-position: 0 0;
}
a#homeHead:hover
{
    background-position: 0 -62px;
}

a#servicesHead
{
    width: 179px;
    background-position: -162px 0;
}
a#servicesHead:hover
{
    background-position: -162px -62px;
}

a#ftz125Head
{
    width: 198px;
    background-position: -341px 0;
}
a#ftz125Head:hover
{
    background-position: -341px -62px;
}

a#aboutHead
{
    width: 182px;
    background-position: -539px 0;
}
a#aboutHead:hover
{
    background-position: -539px -62px;
}

a#contactHead
{
    width: 181px;
    background-position: -721px 0;
}
a#contactHead:hover
{
    background-position: -721px -62px;
}

/*Style for footer navigation*/
ul#footerMenu
{
    width: 902px;
    list-style: none;
    position: relative;
    left: -40px;
}
a.footerMenuLink
{
    display: block;
    float: left;
    height: 80px;
    background-image:url(Images/KAKFooterWeb.jpg);
    text-indent: -9999px;
}
a#ftz125Foot
{
    width: 174px;
    background-position: 0 0;
}
a#ftz125Foot:hover
{
    background-position: 0 -80px;
}
a#iwlaFoot
{
    width: 442px;
    background-position: -174px 0;
}
a#iwlaFoot:hover
{
    background-position: -174px -80px;
}
a#aboutFoot
{
    width: 117px;
    background-position: -616px 0;
}
a#aboutFoot:hover
{
    background-position: -616px -80px;
}
a#contactFoot
{
    width: 169px;
    background-position: -733px 0;
}
a#contactFoot:hover
{
    background-position: -733px -80px;
}

CODE

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

div#kakIs
{
    position: relative;
    left: 120px;
    top: 72px;
}
div#eagleEye
{
    position: relative;
    left: 465px;
    top: -270px;
}
div#interior
{
    position: relative;
    left: 50px;
    top: -205px;
}
div#kakOffers
{
    position: relative;
    left: 550px;
    top: -480px;
}
ul#kakOffersList
{
    font-family: "Helvetica", Trebuchet MS, Arial, Helvetica, sans-serif;
    color: #211C54;

    width: 320px;

    border: none;
    padding: 20px;

    list-style: none;

    position: relative;
    left: 520px;
    top: -485px;
}

a#FTZ125LinkImage
{
    display: block;
    background-image: url(Images/FTZ125LogoWebMini.jpg);
    width: 80px;
    height: 119px;
    text-indent: -9999px;
}
div#ftzImage
{
    position: relative;
    top: -445px;
    left: 530px;
}

a#iwla
{
    background-image: url(Images/HomePageImages/iwlaLogoWeb.jpg);
    display: block;
    width: 250px;
    height: 119px;
    text-indent: -9999px;
}
div#iwlaLogo
{
    position: relative;
    top: -565px;
    left: 635px;
}

p.homePageContent
{
    width: 400px;

    border: none;
    padding: 15px;

}
p#homePageContent1
{
    position: relative;
    top: 55px;
    left: 20px;

    font-family: "Helvetica", Trebuchet MS, Arial, Helvetica, sans-serif;
    color: #211C54;
}

If someone could figure out where this extra space on the right is coming from, I would really appreciate it. I have spent several hours trying to figure out the problem, but am not experienced enough to solve it. Thanks for your time!

Posted by: Frederiek May 17 2012, 03:51 AM

It's the position: relative; that you use everywhere that causes it.

Having all content inside the div with id="siteInnerBackground", you don't need that positioning. Just some widths and floats.
Or create a two columns layout for the text and images section.