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.grantcountysheriffwisconsin.com/Home/Home.php

[FONT=Verdana]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.[/FONT]

Thank you. I will take a look at trying this and let you know.

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.

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.


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


#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.

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.

Glad I could help! I’m new here, so I’m happy to have helped someone already.