Expand or shrink depending on the screen size using css

Question

I'm pretty rubbish with CSS, I muddle through and rather than bash my head against a brick wall...

www.SchofieldBell.com

I have the book part of the page in the middle by placing everything inside #wrapper:

#wrapper
{
    BORDER-RIGHT: 0px solid; 
    BORDER-TOP: 0px solid; 
    BORDER-LEFT: 0px solid; 
    BORDER-BOTTOM: 0px solid; 

    PADDING-TOP: 0px;  
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 17px; 
    MARGIN: 0px auto; 

    WIDTH: 900px;

    DISPLAY: block;

    POSITION: relative; 
    TOP: 0px; 
}

But I want the left hand side of the page (the bit that's missing) to expand or shrink depending on the screen size...

Any ideas?

Oliver.

Answer 1

It is called elastic or fluid layout, and there is a great article in A List Apart

Answer 2

First off...

1. Image overload, optimize or something, took a good 5-8 seconds to load
2. Give the element a 23% width, and a min-height property.
3. This design isnt fluid at all and is too big for my 1600x1200 screen, reconsider that.
4. Using a mix of CSS / tables / and iFrames is pretty messy, try to correct that.

Thanks.

Answer 3

First of all, please write CSS-code in all lowercase - so much easier to read. :-)

#wrapper {
    width: 90%;
}

Will ensure that #wrapper always has a width equal to 90% of the viewport (viewing area of the browser).

or

#wrapper {
    margin: 20px;
}

will ensure that the #wrapper width always is 100% of the viewport, minus 20 pixels on each side.

Did i understand your problem correctly?

Answer 4

Depending on whether I understand your goal correctly, this might be worth a try: Place the div within #wrapper and position it c. 900px from the right side of the wrapper. I assume your intent is to overflow the text off the left hand side of the page.

Answer 5

Thanks for everyones help; but I think I've figured it out!

Answer 6

Eduardo mentioned A List Apart, however, I think this article on that site might be more appropriate (as it seems to be exactly what you want).

2 columns, liquid, fixed right