Absolute positioning a box to a specific distance from left and right side of the page

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

qwerty - 30 Sep 2004 10:40 GMT

Following works in Mozilla, Opera and IE.

<div style="
    left: 100px;
    right: 200px;
    /* JavaScript-hack for IE*/
    width: expression((document.body.clientWidth - 100 - 200) + 'px')
">
    <span>Text<span>
<div>

But this requires JavaScript enabled for IE. If its not enabled box's
width is same style "width: auto".

Is it possible to do calculations with CSS (here I would need width:
100% - 150px - 150px)?

Or is there another solution for this problem?

Reply to this Message

Mark Tranchant - 30 Sep 2004 10:49 GMT

> Following works in Mozilla, Opera and IE.
>
[quoted text clipped - 9 lines]
> But this requires JavaScript enabled for IE. If its not enabled box's
> width is same style "width: auto".

Can you turn JS off in IE?

> Is it possible to do calculations with CSS (here I would need width:
> 100% - 150px - 150px)?

No.

> Or is there another solution for this problem?

Do you need it to be absolutely positioned? See:

http://tranchant.plus.com/tmp/box

Signature

Mark.
http://tranchant.plus.com/

Reply to this Message

qwerty - 30 Sep 2004 13:10 GMT

>> Following works in Mozilla, Opera and IE.
>>
[quoted text clipped - 11 lines]
>
> Can you turn JS off in IE?

Yes, it´s in sSecurity options item called "Active Scripting".

>> Is it possible to do calculations with CSS (here I would need width:
>> 100% - 150px - 150px)?
>
> No.

Seems to be so.

>> Or is there another solution for this problem?
>
> Do you need it to be absolutely positioned? See:
>
> http://tranchant.plus.com/tmp/box

Using relative positioning and margins would be one possibility but I
need to set my divs in a strict order to a page and think divs´s places
relatively to each other. I would want to use absolute position so that
changing pages later for users would be handy.

Reply to this Message

Mark Tranchant - 30 Sep 2004 14:54 GMT

>> Do you need it to be absolutely positioned? See:
>>
[quoted text clipped - 4 lines]
> relatively to each other. I would want to use absolute position so that
> changing pages later for users would be handy.

What? Non-absolutely-positioned divs appear in the same order as they
are in the source. The only "relative" thing is that each div appears
after the one before, just like any non-positioned block element.

Signature

Mark.
http://tranchant.plus.com/

Reply to this Message

Alan J. Flavell - 30 Sep 2004 12:24 GMT

> Is it possible to do calculations with CSS

No.

> (here I would need width: 100% - 150px - 150px)?

Then inevitably the answer has to be "don't do that".

> Or is there another solution for this problem?

In a web context (which is what c.i.w.a.s is about), the solution is
to stop trying to exert precise control over things that aren't
amenable to your precise control. Learn to design flexibly, and
let your pages accommodate themselves to what they find in the many
diverse browsing situations that they are going to find, out there on
the WWW.

There's nothing wrong with wanting your pages to look the way you want
them to look, in the situation that you design them for. But when an
author starts trying to force them to be the same in *every* browser
configuration, then everything starts going nasty. So don't do that.

good luck

Reply to this Message

qwerty - 30 Sep 2004 13:50 GMT

>>Is it possible to do calculations with CSS
>
[quoted text clipped - 3 lines]
>
> Then inevitably the answer has to be "don't do that".

That would succeed already with style "left: 150px; right: 150px" if IE
would hanlde this correctly..so it would possible in theory..but in
practise IE makes is impossible..

>>Or is there another solution for this problem?
>
[quoted text clipped - 9 lines]
> author starts trying to force them to be the same in *every* browser
> configuration, then everything starts going nasty. So don't do that.

I understand your view.

But nowdays CSS should let designer to make page look the way he/she
wants it to look, thing what HTML wasn't planned for. This would be more
close to reality if IE would obey standards..

I think I must make some compromises in my design idea, or except that
most IE users don't disable JavaScript and the I can design page the way
I want (if I don't be faced with more hard troubles relating CSS and IE
wich couldn't be solved)..

> good luck

I feel that it´s luck what I need handling with IE and standards issues..

Reply to this Message

Alan J. Flavell - 30 Sep 2004 20:43 GMT

> > There's nothing wrong with wanting your pages to look the way you
> > want them to look, in the situation that you design them for.
[quoted text clipped - 3 lines]
>
> I understand your view.

What followed, gives me reason to doubt that.

> But nowdays CSS should let designer to make page look the way he/she
> wants it to look,

I think the regulars around here (c.i.w.a.s) rather expected you to
say that. I know that I did. But it doesn't change the fact that
browsing situations are getting *more* diverse with time. And the
need to accommodate diversity is getting recognised as an important
part of communicating with a wider audience, not only because of WAI
guidelines and associated legislation.

> thing what HTML wasn't planned for.

What little you know about the history of HTML!

> This would be more close to reality if IE would obey standards..

You're confusing two quite different issues - diversity of browsing
on the one hand, and browser bugs on the other.

bye.

Reply to this Message

Robert Hänel - 30 Sep 2004 19:42 GMT

Hello,

> <div style="
> left: 100px;
[quoted text clipped - 6 lines]
> [...]
> Or is there another solution for this problem?

What about
<div style="margin-left:100px; margin-right:200px;">
<span>Text<span>
<div>
?

Robert

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2004

Absolute positioning a box to a specific distance from left and right side of the page