body background | content solutions >> JavaScript?

[The Mad Swede]

Sayontan~

Thank you for your reply.
Sorry for the confusion.

Please find attached a screenshot of the desired outcome.

I would like to keep consistent the amount of white space between the right edge of the black background and the left edge of the logo/footer/text ~ in all views. Is it
possible to keep the amount of white space in said example fixed/constant even when the page is magnified/browser resized ~ whether 75% or 250%? I want the
desired amount of white space to act as a vertical moat or buffer between the black background and the content ~ if possible.

Find sceenshots of two zooms [examples #2 & #3 ~ post dated 5.17.12] of what I do not want to happen [the bleeding effect]. You had stated that zooms represent poor
testing examples but I referenced said post to exaggerate my point. I would like the white space on the screenshot to be static ~ similar to the white space between the
left edge of the right sidebar widgets and the content, for example. Colin did not recommend changing the # of columns.

My attempts via info gleaned from researching this forum, W3C Schools and the "box model" have failed miserably. If my inquiry is beyond the scope of this forum I will certainly consider hiring a professional to rescus me. Please see comments below by you [via WordPress Forum} and Colin:

"The only issue you will see is when someone resizes the browser and the wrapper gets pushed to the left edge (in which case your black text overlaps a dark background, becoming unreadable). "

by Colin » 14 May 2012, 08:16
"One problem you have is that the visitors to your site will have different screen resolutions and so as a result you need something that looks good at all resolutions. To do that you need to start dabbling in javascript and that is beyond my skill set."

Hope this helps clarify my desires.
I am unsure how to do it...or if it can even be done.

Thank you so much for your extra effort.

~jsk

[sayontan]

While this can be done, your content will become really narrow for smaller widths. The way to do this would be to set a left and right padding of 200-300px for "body", then make #wrapper, #header-container, #nav and #footer have 100% width without max-width or min-width. But then, remember that you are potentially chopping off more than 400px of your content width for narrow screens. So if you shrink your window, you can see that your content will have really little space to render itself. So in order to keep a background in this manner you will be sacrificing the readability of your site.

[The Mad Swede]

Sayontan~

Clearly, I had no idea it would be this involved; so, I apologize for the prolonged torture.
I would like to see the damage I created...does the following look functional based on your recommendations?
{
padding: body-left: 250px;
padding: body-right: 250px;
#wrapper-width: 100%;
#header-container-width: 100%;
#nav-width: 100%;
#footer-width: 100%
}

No more questions re: this topic ~ promise!

Thanks to you and Colin for your extensive education and willingness to help.
I owe both of you more than a coffee!

~jsk