sidebar

[garry]

I can't seem to get my sidebar to take up the whole height of the page. I have tried setting it to width:100%; but it still only takes up the content that it contains. Would it have anything to do with it me floating it to the right? Is this the correct way to float it?

 

Here is my css for the sidebar:

 

.sidebar {

width: 340px;

        height: 100%;

float: right;

background: #F0F0C0;

padding: 5px;

}

 

And attached is an example of it not filling up the whole right hand side. Can anyone help?

 

[attachment deleted by admin]

[dbrimlow]

Floated boxes ONLY take up as much space as the content they contain.

 

What you want is the "faux columns" technique - many of us couldn't live without it:

 

http://www.alistapart.com/articles/fauxcolumns/

[garry]

Thanks for your help. This looks like what I'm trying to do but I just have one more small question. I'm using this code from the tutorial you showed me:

#content {

background: url(images/smallcream.gif) repeat-y 62% 0;

}

 

The smallcream image is only 3x3 pixels. So this method gives it one line directly down the screen, as it repeats y. I want it to repeat-x after that line but if I change repeat-y to just repeat, it makes the WHOLE area that color. Here's an example attached

 

 

[attachment deleted by admin]

[dbrimlow]

I'm still not sure I understand your question. I know you're using a tutorial (which is the best way to learn if you can reverse engineer it).

 

You CAN change it to repeat-x, remember, for the faux column technique to work, though, you NEED it to tile top to bottom. That means you have to set the width of the graphic to match or exceed the width of the container.

 

Easy for a fixed width layout. Not to hard for a liquid layout either (percentages) - it just requires using a little math to calculate the max pixel version to equal the positioning of various column sizes.

 

That is a technique Dave Child perfected based on Dan's faux columns (Dan liked it so much, he uses it in his book "bulletproof web site): http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layouts/