Jump to content

Liquid mixed with possible fix size tableless?


Recommended Posts

Hello, I was playing around with the tableless design try-it-editor here and found it to be really interesting. However, I am having trouble getting it to do what I want to do.I am trying to achieve a tableless design for layout, which will have a fixated section on the left for panels (menus and stuff), and a content space on the right which preferably would be liquid form (so it expands as needed for those wide screen users) while having a minimum width so that users with smaller resolution will not be forced to read one character per line (they will, however, be forced to scroll horizontally).The targed audiance group will likely be on 1024x768 systems, but some may be on 800x600, and others may be on 1280x800 (widescreen) systems, so I defined my ideal constraints to 1024x768. If anyone have bigger resolution, the page should liquid to adjust the wideness; if anyone have smaller resolution, horizontal scroll should be made available. However, since min-width setting is not accepted by internet explorer (css 2 function), a work around must be deployed. After some google research (source lost, sorry, cannot credit the person), it became evident that to accomandate this, use the min-width in conjure with 'expression()' with a simple one line if condition. So our code currently looks like this:

min-width: 650px; width:expression(document.body.clientWidth < 1024 ? "650px" : "800px" );

The above will set the width for the particular element to 650px if the client width is lesser than 1024, or else set it to 800px, but regardless of the size of the display, it will always maintain 650px width. This is good, because now 800x600 user and 1024x768 users are addressed. However, bigger resolution users (1280x800, or 1280x1024) will still see a solid size of up to only 800px instead of expanding liquid as needed. For example, I am currently on a widescreen laptop, if I drag my window wider to 1100x800, then to 1280x800, I'll see just the fix 800px width for it, regardless of where I am. So, to accomandate the liquid settings I want to achieve, I tried to embed additional expression command to the current, and it looked something like this:

width:expression(document.body.clientWidth < 1024 ? "650px" : expression(document.body.clientWidth - 300));

But it causes IE to throw error messages none stop. And moving the -300 outside to the upper scope does not address the problem either. Is there any solutions as to how to do this properly so that Internet Explorer does not throw errors like there's no tomorrow?Thanks in advance!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...