100% Going off screen?

Hey everyone. I’m working on this website for a business, and I unfortunately have not been designing in a resolution common to the majority of the visitors (1024x768). Today I tested this res and everything looks messed up. The main problem I was having though, is that the site seems to extend past itself in this resolution and create a good bit of whitespace, not to mention moving elements and whatnot. I am going to make the nav buttons smaller to help save some space there, but could anyone determine why this design is acting like this? It’s odd, and I know my CSS is a bit messy, but I don’t feel like 100% should go anywhere past the screen as to require horizontal scrolling. Thanks.


Hi Kossae, you have a declared width of 1150px on #mediawidgets. That might account for the scrollbar.

Thanks for noticing that. However, I am not currently using the #mediawidgets id, so even after adjusting that I am getting the same problem. Everything seems to cut off at the screen, but something keeps extending into whitespace for some reason.

I may be missing something but in the link you provided, here is the HTML I see:

<div id="mediawidgets">
    <img src="images/facebookheader.png"><img src="images/twitterheader.png">
        <iframe> et etc...

Oh wow, that was it. Thank you very much you all, I feel stupid now lol. One more quick thing. How would you propose coding the header at the top? Currently I have a main head div, then I split it up into three separate divs with variable widths (I’m wanting an image on the right side as well). However when viewing in a lower res, I only see the Call Now and the middle logo is not centered (as the images themselves aren’t variably sized).

Well you could basically make the images, the call back and the logo, background images of the divs, then use background-size to size the images down using media queries.