SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page wider than it should be

    Hello everyone, I have a slightly annoying problem with my page becoming really wide for no apparent reason. When viewed in a browser, a horizontal scroll bar appears at the button even though all of the content is under 1200px wide, and my screen is suitably wide.

    My website has the following HTML
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My Page</title>
    <style type="text/css">
    
    
    body 
    {
        background-color: #e7e7e7;
        width: 100%;
    }
    .outer
    {
        width: 100%;
        text-align: center;
        position:relative;
    }
    .main
    {
        width: 1200px;
        height: 782px;
        margin-left: auto; 
        margin-right: auto;
        text-align: left;
        position:relative;
    }
    
    h1
    {
        font-family: Klavika;
        font-size: 22px;
        color: #000;
        position:relative;
        left: 38px;
        top: 15px;
    }
    h2
    {
        font-family: Klavika;
        font-size: 16px;
        color: #C8001A;
        position:relative;
        left: 770px;
        top: -45px;
        letter-spacing:1px;
    }
    h3
    {
        font-family: Klavika;
        font-size: 28px;
        color: #C8001A;
        position:relative;
        left: 38px;
        top: -50px;
    }
    p
    {
        font-family: Helvetica;
        font-weight:bold;
        font-size: 12px;
        color: #666;
        position:relative;
        left: 38px;
        top: -75px;
        letter-spacing:1px;
        line-height:125%
        
    }
    p.red
    {
        font-family: Klavika;
        font-size: 14px;
        color: #C8001A;
    }
    
    
    </style></head>
    <script src="http://xfinity.comcast.net/js-api/compressed/xpbar.js"></script>
    
    
    <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="outer"><div class="main">
    <h1>For some reason<br/>the page becomes really wide</h1>
    <h2>Does it have to do with positioning?</h2>
    <h3>SAMPLE TITLE</h3>
    
    
    
    <p>I am not affiliated with comcast by the way;</p>
    
    <p class="red">I was just trying their vendor's API. So why is the page so wide?</p>
    
    
    </div></div>
    <iframe scrolling="no" frameborder="0" src="http://sprint.qa.xfinity.comcast.net/footer/vendor/standard/2/" style="width: 100%; height: 309px;"></iframe>
    <p>&nbsp;</p>
    </body>
    </html>
    For some reason, it becomes REALLY wide.
    Anyone know what might be the cause?

    Thanks :]

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The problems are caused by the code in red, and you need the extra code in blue:

    Code:
    body {margin:0;}
    
    h1
    {
        font-family: Klavika;
        font-size: 22px;
        color: #000;
        position:relative;
        /* left: 38px; */
        top: 15px;
    }
    
    h2
    {
        font-family: Klavika;
        font-size: 16px;
        color: #C8001A;
        position:relative;
       /*  left: 770px; */
        top: -45px;
        letter-spacing:1px;
    }
    h3
    {
        font-family: Klavika;
        font-size: 28px;
        color: #C8001A;
        position:relative;
        /* left: 38px; */
        top: -50px;
    }
    p
    {
        font-family: Helvetica;
        font-weight:bold;
        font-size: 12px;
        color: #666;
        position:relative;
        /* left: 38px; */
        top: -75px;
        letter-spacing:1px;
        line-height:125%
    }
    Elements like h1 and p are 'block' elements, so they are 100% wide by default. If you move their position, they will still be 100% wide plus the extra left position. That causes the page to push out much wider.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •