SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    large space to right of site

    Hi,
    I have a large space to the right of the site. The whole site is within a table. Something creates a large space to the right. Any ideas wold be helpful. The site is http://www.grantcountysheriffwiscons.../Home/Home.php

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jwinkels View Post
    Hi,
    I have a large space to the right of the site. The whole site is within a table. Something creates a large space to the right. Any ideas wold be helpful. The site is http://www.grantcountysheriffwiscons.../Home/Home.php
    As far as I can see, the problem lies with <div id="sheriff_name">, which you have used relative positioning to shift way over to the right. Except that it is still a <div> and you haven't told it otherwise, so it retains an implicit width:100%; declaration. With that width and a shift in from the left of 900+px, it's creating a huge empty space off to the right.

    A better solution would be not to use position:relative; but to give text-align:right; and leave the box lined up to the left. That way the text will be where you want it to be, but the box won't be causing a huge blank space.

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    As far as I can see, the problem lies with <div id="sheriff_name">, which you have used relative positioning to shift way over to the right. Except that it is still a <div> and you haven't told it otherwise, so it retains an implicit width:100%; declaration. With that width and a shift in from the left of 900+px, it's creating a huge empty space off to the right.

    A better solution would be not to use position:relative; but to give text-align:right; and leave the box lined up to the left. That way the text will be where you want it to be, but the box won't be causing a huge blank space.
    Thank you. I will take a look at trying this and let you know.

  4. #4
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem lies from what I can tell not only with the sheriff_name but also the sheriff_pic and the search box all positioned relatively. Text-align would not work but when I positioned them absolutely it did.

  5. #5
    SitePoint Member jwmollman's Avatar
    Join Date
    Mar 2012
    Location
    Cincinnati, OH, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To me, it looks like the problem is with the <div id="search_box">. It seems the property "left: 775px;" on that <div> is causing the large space to the right of the site because you are pushing the search box all the way over to make it look as if it's floated to the right of the page. I looked at the site with Chrome Developer Tools and applied a background color of red to that <div> and that's where I saw it hanging all the way out to the right.

    To fix this, you could try reworking that area by placing two <div>'s within the <div id="stripe1">, and float one to the left and the other to the right, while aligning text accordingly.

    HTML Code:
    <div id="stripe1">
        <div id="left">
            <p>A paragraph here...</p>
        </div>
        <div id="right">
            <input type="text" name="search_box" />
            <input type="submit" name="submitBtn" value="Search" />
        </div>
        <div style="clear: both;"></div>
    </div>
    Code:
    #stripe1 {
        width: 1080px;
        margin: 0 auto;
    }
    #left {
        text-align: left;
        float: left;
    }
    #right {
        text-align: right;
        float: right;
    }
    You may have to do some adjustments to paddings and margins to get everything aligned cleanly, but hopefully that helps.

  6. #6
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great catch that was it. I could leave the others positioned relatively. I really appreciate you taking the time to look. Positioning absolutely also killed the issue. I've learned a lot thanks.

  7. #7
    SitePoint Member jwmollman's Avatar
    Join Date
    Mar 2012
    Location
    Cincinnati, OH, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad I could help! I'm new here, so I'm happy to have helped someone already.


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
  •