Faux Column - Just Checking My Understanding

[Zygoma]

Buon giorno from 11 degrees C no Sun Wetherby UK...

Working on this tutorial http://www.maxdesign.com.au/articles...uts/two-fixed/ I'm wanting to make sure i understand what this bit of code does:

#layout-two-fixed #content-container{

background: url("layout-two-fixed-background.gif") repeat-y scroll 100% 0 #FFFFFF;
float: left;
width: 900px;
}

I get this is the bit of code that adds the grey repearting gif befind the right hand side column but what i dont get is this bit 100% O - is this like x y co-ordinates or something.

Thanks in advance,
David

[RichardAskew]

Hi David

I believe so, the 100% is the x co-ordinate. If you have Firefox install Firebug and you can play in browser.

[dresden_phoenix]

It'd probably be easier to understand if the image was an irregular shape.
As previously mention the first # refers to the X coordinate. Admittedly it's a little baffling, but when you use a bg position of 100% Y(Y can be any #, since we are repeating the bg vertically), the bg image's RIGHT edge is aligned to the right edge of the element. Conversely a position of 0 Y will align the LEFT edge of the image with the left edge of the element, and 50% Y aligns the CENTER of the image to the CENTER of the element.

Demystifying practice, what is happening here is that you are placing a vertically repeating bg image at the right most edge of your container and as such creating the visual the illusion of a 'column' on the right side.

[Zygoma]

Brill tanks, another 24 caret gold answer from sitepoint :-)

[Dr John]

Have you tried deleting the 100% 0 to see what happens?

I strongly suspect the code is actually giving the standard default values which you normally don't need to state.