css liquid design help?

Question

http://www.generalya.com/living/update9/asd.html

How do I make this into a liquid layout where resizing the browser will not create horizontal scroll bars?

I created this page using imageready using CSS

here is the page in tables..http://www.generalya.com/living/update9/asd2.html

which way is more efficient? Thanks

Answer 1

It's not a CSS issue.
Image sizes are too large to display on a smaller screen, so the browser throws scollbars up. This is normal.

You may be able to do something with the overflow property (CSS2 section 11.1), but things could get ugly.

You may have to switch to an 800 by 600 look if you use that page style.

Answer 2

Just to add...

Using imageready's "save as" web page function to actually lay out your pages is problematic. I would think at some point that Adobe will someday come up with a magic way of generating web standards-type code, but today ain't that day. There are a gazillion CSS factors that go into writing markup that can render properly across browsers, is accessible, semantic, etc...

How small do you want to be able to shrink the browser before you get horizontal scrollbars?

Answer 3

As the man said, this behavior is caused by your graphics being wider than the displayed area. You can investigate wrapping the graphics with a

Answer 4

physique{ textual content textile-align:center } #container-div{ textual content textile-align:left; margin:0 50px /*Or in spite of*/ } If that's no longer what you're after please positioned up a linkie - a image speaks one thousand words :)