wrapper width:100%; works fine when browser is maximized but when not maximized it cuts off

Question

Basically I'm creating this website and I have the wrapper set to 100% width and it works fine when the browser is maximized but upon not having it maximized and you scroll to the right the content cuts off at the end of the content container and doesnt stretch the full way?? I've looked around everywhere for a solution to this before asking here and I cannot find one.

Here's the wrapper CSS.

#wrapper-main { background-image:url(images/structure/bg.png); background-color:#e8eef1; background-repeat:repeat-x; display:table; width:100%; margin:0; padding:0; }

If you take a look at the site and don't have it maximized you should see what i mean, im not sure how to resolve this???

http://eosa.co.cc/themes/osoa/index.html

Answer 1

The problem is produced by line 214 in styles.css where you define:

.onethirdbox { width:296px; float:left; margin:0 40px 40px 0; position:relative }

If you add all of this up you each box has a width of 296+40 = 336px. 3*336 = 1008px... which is wider than your width of content at 968px. But even if you reduce the margin to 0, you still have to reduce the width to 250px to get rid of the effect you don't like.... this of course makes the one third boxes look funny.... so clearly there is something else going on.... I'm not sure what it is right now, but this is where you should start.... In other words if you replace the line above with:

.onethirdbox { width:250px; float:left; margin:40px 0; position:relative }

The problem you wrote about disappear (and a new one appears).

To brute force the solutions, instead of changing onethirdbox, you could just make the overflow of the #footerwrapper invisible:

#footerwrapper {
    overflow:hidden;
}

This cures the symptom, but doesn't actually solve whatever the problem is.