Positioning weirdness

[Erik Funkenbusch]

I've run into a weird problem and i'm not sure if it's a bug in the
browsers or if this is part of the standard.

A simple example:

#x {
min-width: 600px;
}

#y {
position:absolu te; top:0px; right:0px; margin-left:600px;
}

<div id="x">This is a test</div>
<div id="y">This is the main area</div>

This works great, and does what I expect, namely stopping the right div
from moving over the minimum size area of the left div.

However, if I add "width: 215px" to #y, then the margin-left attribute
appears to be ignored. It does this in both IE and Firebird.

Can anyone shed some light on this, and perhaps offer a solution?

[Mikko Rantalainen]

Re: Positioning weirdness

Erik Funkenbusch wrote:[color=blue]
> #x {
> min-width: 600px;
> }
>
> #y {
> position:absolu te; top:0px; right:0px; margin-left:600px;
> }
>
> <div id="x">This is a test</div>
> <div id="y">This is the main area</div>
>
> However, if I add "width: 215px" to #y, then the margin-left attribute
> appears to be ignored. It does this in both IE and Firebird.[/color]

URL for the test case? What exactly you're trying to achieve?

If you're using position: absolute, you should use top, left, right,
bottom, width and height only, IMHO. It works better.

--
Mikko

[Erik Funkenbusch]

Re: Positioning weirdness

On Tue, 16 Sep 2003 10:06:40 +0200, Rijk van Geijtenbeek wrote:
[color=blue]
> On Mon, 15 Sep 2003 19:21:02 -0500, Erik Funkenbusch
> <erik@despam-funkenbusch.com > wrote:
>[color=green]
>> I've run into a weird problem and i'm not sure if it's a bug in the
>> browsers or if this is part of the standard.
>>
>> A simple example:
>>
>> #x {
>> min-width: 600px;
>> }
>>
>> #y {
>> position:absolu te; top:0px; right:0px; margin-left:600px;
>> }
>>
>> <div id="x">This is a test</div>
>> <div id="y">This is the main area</div>
>>
>> This works great, and does what I expect, namely stopping the right div
>> from moving over the minimum size area of the left div.
>>
>> However, if I add "width: 215px" to #y, then the margin-left attribute
>> appears to be ignored. It does this in both IE and Firebird.
>>
>> Can anyone shed some light on this, and perhaps offer a solution?[/color]
>
> Your div#y becomes over-constrained. Think about: you've fixed the 'right'
> edge and the 'witdh' of the box. Now the left edge follows automatically,
> or either 'width' or 'right' have to be ignored. According to the rules,
> 'margin' is the value that should adapt in such a case.[/color]

I'm not sure how it's over-constrained. It works fine with an auto-width,
even if I make the text in div#y larger than the width i'm specifying.

I'm trying to achieve the same effect that you can see on
www.csszengarden.com. if you resize the window, the navbar on the right
stays tacked to the right side of the browser until it reaches the
margin-left specified, in which case it extends off to the right and scroll
bars are added to the viewport to scroll over to it.

So, in effect, I want a "liquid" content area that has a min-width and a
right-side nav panel that's fixed to the right side of the viewport but
doesn't resize over the content area. ie it stops at the right side of the
content area when the content reaches it's min-width.

[Erik Funkenbusch]

Re: Positioning weirdness

On Tue, 16 Sep 2003 09:35:00 +0300, Mikko Rantalainen wrote:
[color=blue]
> Erik Funkenbusch wrote:[color=green]
>> #x {
>> min-width: 600px;
>> }
>>
>> #y {
>> position:absolu te; top:0px; right:0px; margin-left:600px;
>> }
>>
>> <div id="x">This is a test</div>
>> <div id="y">This is the main area</div>
>>
>> However, if I add "width: 215px" to #y, then the margin-left attribute
>> appears to be ignored. It does this in both IE and Firebird.[/color]
>
> URL for the test case? What exactly you're trying to achieve?
>
> If you're using position: absolute, you should use top, left, right,
> bottom, width and height only, IMHO. It works better.[/color]

See my message in response to Rijk van Geijtenbeek.

[Rijk van Geijtenbeek]

Re: Positioning weirdness

On Tue, 16 Sep 2003 12:59:58 -0500, Erik Funkenbusch
<erik@despam-funkenbusch.com > wrote:

...
[color=blue]
> I'm not sure how it's over-constrained. It works fine with an
> auto-width, even if I make the text in div#y larger than the width i'm
> specifying.[/color]

Say you have an available width of 600 pixels. You tell the browser to
make a (border- and paddingless) DIV exactly 300 pixels wide, and fix the
right hand side at zero pixels from the right hand edge. Now consider that
margin+padding+ border+contentw idth must equal available width. Now how can
the browser honor a left-margin of anything else but 300 pixels?

--
Rijk van Geijtenbeek

[Rijk van Geijtenbeek]

Re: Positioning weirdness

On Tue, 16 Sep 2003 20:43:17 -0500, Erik Funkenbusch
<erik@despam-funkenbusch.com > wrote:

...
[color=blue]
> That doesn't seem to explain why auto width honors the margin-left
> attribute, and creates scroll bars if you resize the window to below the
> size if the margin creating a larger area than you can see.
>
> All i'm asking is for the same behavior if the width of div#y is auto or
> fixed. Why would it ignore margin-left: with fixed width but not auto?[/color]

Because it can not honor everything at the same time.
[color=blue]
> Also, if I don't use positiong, and set the content width larger than the
> window size, it'll create scrollbars as well. So your comment about the
> margin+padding+ border+contentw idth must equal available width doesn't
> seem to fit with my understanding of things. Can you explain this?[/color]

Sure. You get a negative margin in that case. Please try reading the
relevant chapter in the CSS2 spec if you don't believe me ;)

http://www.w3.org/TR/CSS2/box.html

http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

As for the specific effect you want, I'd suggest dissecting the stylesheet
used for it on www.csszengarden.com.

--
Rijk van Geijtenbeek

[Erik Funkenbusch]

Re: Positioning weirdness

On Wed, 17 Sep 2003 17:19:38 +0200, Rijk van Geijtenbeek wrote:
[color=blue]
> On Tue, 16 Sep 2003 20:43:17 -0500, Erik Funkenbusch
> <erik@despam-funkenbusch.com > wrote:
>
> ..
>[color=green]
>> That doesn't seem to explain why auto width honors the margin-left
>> attribute, and creates scroll bars if you resize the window to below the
>> size if the margin creating a larger area than you can see.
>>
>> All i'm asking is for the same behavior if the width of div#y is auto or
>> fixed. Why would it ignore margin-left: with fixed width but not auto?[/color]
>
> Because it can not honor everything at the same time.
>[color=green]
>> Also, if I don't use positiong, and set the content width larger than the
>> window size, it'll create scrollbars as well. So your comment about the
>> margin+padding+ border+contentw idth must equal available width doesn't
>> seem to fit with my understanding of things. Can you explain this?[/color]
>
> Sure. You get a negative margin in that case. Please try reading the
> relevant chapter in the CSS2 spec if you don't believe me ;)
>
> http://www.w3.org/TR/CSS2/box.html
> http://www.w3.org/TR/CSS2/visudet.ht...hs_and_margins
>
> As for the specific effect you want, I'd suggest dissecting the stylesheet
> used for it on www.csszengarden.com.[/color]

It's not that I didn't believe you, It's that I didn't understand it.

Thanks for the pointers.

[Erik Funkenbusch]

Re: Positioning weirdness

On Wed, 17 Sep 2003 17:19:38 +0200, Rijk van Geijtenbeek wrote:
[color=blue]
> As for the specific effect you want, I'd suggest dissecting the stylesheet
> used for it on www.csszengarden.com.[/color]

I have been doing that, which is where I got the margin-left: idea.

The links you provide though did lead me to a new idea, which was to set a
minimum width on a non-static parent container, which seems to work in
Firebird, but not in IE. I think the key I was missing was the
"containing-block" definition which the CSS spec provides.

Now, if I can figure out a workaround for IE...

[Erik Funkenbusch]

Re: Positioning weirdness

On Wed, 17 Sep 2003 12:29:38 -0500, Erik Funkenbusch wrote:
[color=blue]
> On Wed, 17 Sep 2003 17:19:38 +0200, Rijk van Geijtenbeek wrote:
>[color=green]
>> As for the specific effect you want, I'd suggest dissecting the stylesheet
>> used for it on www.csszengarden.com.[/color]
>
> I have been doing that, which is where I got the margin-left: idea.
>
> The links you provide though did lead me to a new idea, which was to set a
> minimum width on a non-static parent container, which seems to work in
> Firebird, but not in IE. I think the key I was missing was the
> "containing-block" definition which the CSS spec provides.
>
> Now, if I can figure out a workaround for IE...[/color]

Well, to answer my own questions. min-width: isn't supported on IE.
Therea are two workarounds though. One is to use a fixed width HR, IE
won't shrink the containing block below the width of the HR. The other is
to use a script from doxdesk.com call minmax.js.

I like the idea of making min-width: work, but I don't like using extra
javascript to work around bugs. The script solution makes the HTML
cleaner, but requires more stuff to download, increasing the time to
download the page. Decisions.. decisions...

If you could answer one more quesiton for me, I'd really appreciate it. I
notice that Firebird does collapose the containing block over the HR even
when it has a specific width, is that allowed by the standard?

[Rijk van Geijtenbeek]

Re: Positioning weirdness

On Wed, 17 Sep 2003 13:34:06 -0500, Erik Funkenbusch
<erik@despam-funkenbusch.com > wrote:

...
[color=blue]
> If you could answer one more question for me, I'd really appreciate it.
> I notice that Firebird does collapse the containing block over the HR
> even
> when it has a specific width, is that allowed by the standard?[/color]

I can't answer that. HR is a rather special element, it is not well
defined in the HTML spec how it should fit into the block/inline/replaced
scheme, and neither does CSS say much about it. You can see it as an empty
block with just a border set, but that is just a possible interpretation.
I would avoid using HR in a standards based page ;) Just use DIV to mark
sections, and set borders on the DIV where the section delimiter should be
visible.

--
Rijk van Geijtenbeek