maintain ratio between fluid div's

[jbonham]

Hi,

this relates to my thread on Jan 5. GUI fluid layout.

Two issues:

1)Is it possible to maintain the same ratio between expandable divs? example:

|-----------------------------------|
| DIV |
| 3 |
|----|---|--------------------------|
|Div| | |
|2 | Div |Div|
| | 1 | 4 |
| | | |
| | | |
| | | |
| | | |
| | | |
------------------------------------|
| Div |
| 5 |
|-----------------------------------|

(sorry about the sloppiness. haven't yet mastered hyphens/divider lines).

How can I assure that each div maintains the same size ratio to each other, regardless of resolution size, and yet still be fluid and relative?

2)I am making each div expandable both height and width, but to a maximum height and width. Not 100%. That way, if I set the max. height of div1 + div3 + div5 at 1100px, and set all height sizes with %, the layout will be 100% high in 800x600, 1024x768, but will stop short of 100% in larger browsers.

So, no matter what resolution is viewing, my layout will look the same unto itself, only smaller or larger.

Kinda confusing, but I hope I have clearly expressed myself to warrant a reply.

jbonham

 

[Vragabond]

I am not sure what you're looking for here. You seem to describe the solution yourself. I suggest you work with a container that is as wide as divs 3 and 5. That way you get the desired width. This container has max-width: 1100px. That will take care of the page growing beyond 1100px on larger screens. Stupid IE however cannot grasp that, that's why you will need to style it like this:

#container {
  width: 100%; /* smart browsers' width */
  max-width: 1100px; /* smart browsers' max width */
  width: expression(document.body.clientWidth > 1100? "1100px": "100%" ); /* both widths for IE */
}

After that, you have most of the work done. As long as you keep the widths of other divs in percentages, their values will increase proportionally.

 

[jbonham]

thanks vragabond.

It was mostly part 2 that I wasn't sure about, ensuring that the height (not the width, typo) is capped off in larger browsers.

And now I know making all statements in % will ensure correct ratio is preserved between divs.

jbonham

 

[caffrinho]

Am i missing something here????

wouldn't it just be easier to specify the widths in em's instead of pixels!?

that way they'll always be proportional to each other regardless of resolution.

 

[johnwm]

But what happens when the user resizes their browser window? That's why % is needed

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

For tsunami relief donations

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts