I have a another question, about my page which is in construction. How is it known that the width of the page is 1160px ? If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?

ralphm
—
2011-02-26T03:27:33Z —
#3

SiberianHuskey said:

Could someone help me as to why the background image on this page, does not repeat-x on the left side and only repeats on the right side ?

It's because you have a large margin set on that element, and a bg image does not show in an element's margin. You could use padding instead:

Not sure if that's what you are asking, but it seems like the obvious answer. The wrapper is set to that width.

system
—
2011-02-26T06:13:51Z —
#5

If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?

I didn't know that margin could effect the BG image.

ralphm
—
2011-02-26T12:25:58Z —
#6

You're welcome.

system
—
2011-02-26T14:25:27Z —
#7

I forgot to point out the quote in message #5 which remains unanswered, that is why there was no 'thank you' !

system
—
2011-02-27T01:50:27Z —
#8

Ralph I'm hoping you had a response ?

ralphm
—
2011-02-27T02:30:13Z —
#9

If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?

The question is a bit hard to understand. My intitial response is:

if the header is set to width: 100% (or even if that isn't specified) it will be 100% width, as that's the normal behavior of a div. So the header will be the full width of the window, even if it doesn't appear so.

so "how can you fix this" doesn't really mean anything to me. Do you want a set width to it, or want it to exapnd the full viewport width? If the latter, you can give it a background color or bg image to show that it visually spans the whole width.

system
—
2011-02-27T18:34:19Z —
#10

I want the #header to expand to the full width of the page, because it's no longer within #wrapper. Width{100%} doesn't have any value because it's no longer the child or #wrapper. How can I resolve this ?

Victorinox
—
2011-02-27T19:00:47Z —
#11

header is expanding the full width of the page. It has a background color with the value #AAA.

system
—
2011-02-27T20:49:06Z —
#12

Correct, but it's not the full width of the page no longer. Scrolling horizontally shows the space to the right.

Victorinox
—
2011-02-27T22:47:54Z —
#13

I'm too busy to get involved right now, but here's a stripped down version of your page that demonstrates the problem and may help someone suggest a fix.

I had originally put the width to 1160px, that didn't solve it. Thanxs!

ralphm
—
2011-02-28T04:49:59Z —
#16

When you narrow the viewport, it narrows the div set to width: 100%. But as you see, if you drag the scroll bar to the right, the div doesn't resize again. So setting that min-width prevents the div from growing smaller than the wrapper, which means the problem goes away. When you scroll right, you'll only ever be able to scroll are far right as the widest element goes.

Rayzur
—
2011-02-28T06:34:30Z —
#17

As it is right now you are getting a 134px scrolling distance right off the bat without any content reaching the bottom.

You can prevent the #header height from being added to the #wrapper's min-height:100% by nesting an inner content div in the wrapper.

Drag the wrapper underneath the header with a negative top margin then set RP on the header to layer it on top.

Now pad out the top of the content div that is nested in the wrapper to push content below the header.