CODEWITHSUNDEEP
csshtml
Oliver
Oliver

Reputation: 839

Expand or shrink depending on the screen size using css

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?

Upvotes: 4

Views: 8744

Answers (5)

SergioL
SergioL

Reputation: 4963

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

Upvotes: 0

steamer25
steamer25

Reputation: 9553

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.

Upvotes: 0

Arve Systad
Arve Systad

Reputation: 5479

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?

Upvotes: 1

Dmitri Farkov
Dmitri Farkov

Reputation: 9671

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.

Upvotes: 0

Eduardo Molteni
Eduardo Molteni

Reputation: 39413

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

Upvotes: 1

Related Questions