[thelist] DIVs with height not expanding vertically

Ian Anderson ian at zstudio.co.uk
Mon Mar 14 19:33:33 CST 2005

M. Seyon wrote:

>> I was astonished to read (forget where) that the IE behaviour is 
>> wrong here, and that Firefox and Safari are behaving to spec.
>> Can anyone verify that this behaviour is as intended?
> I'm astonished that you're astonished. That's the way it works for 
> width, why should it be any different for height.
And I'm astonished you're ast... never mind.

I don't think that the way width works is entirely comparable, actually 
- they seem quite different in this situation. Content in a fixed width 
container doesn't expand beyond the bounds of the container, it wraps. 
Height is subordinate to width when the content can wrap.

The model seems completely wrong-headed though; almost surreal. What 
earthly use is the behaviour of height as spec'd, then? Is it intended 
to be used only in conjunction with scrolling? Without scrolling the 
fixed height container (which is not default behaviour), the behaviour 
of height in CSS seems completely useless for design. I suppose you 
could argue that setting height without understanding the accompanying 
properties that may also need to be set is asking for trouble, like 
playing with switches in a 747 cockpit.

However, my view is that the terminology is needlessly confusing and CSS 
is badly designed here. I'm a professional; I understand the CSS model 
better than most web designers out in the world - and I am still getting 
caught out by applying assumptions from the rest of the world to CSS 
that turn out to be misleading, as if I was a novice. I am not a novice 
(I am a dumbass sometimes, but I am not new to this stuff).

Surely, what most designers would mean by "height" is what CSS calls 
"min-height", and the behaviour of "height" in CSS is what could more 
reasonably be called "abs-height"?

It is like the design of the box model itself; this ludicrous idea that 
it is helpful to define width of objects using internal dimension rather 
than external; completely counterintuitive and inconsistent with 
everything else we learn from our earliest years. It has practical 
limitations too compared with describing outer dimension. Consider a DIV 
of 70% width with 1px borders - how much space is left? Not 30%; it 
can't be calculated in fact. In my humble opinion the CSS box model is 
essentially broken.

You know, I'm beginning to wonder if unquestioning adherence to W3 web 
standards is entirely healthy. CSS was clearly designed by a committee 
in the same way that a camel is a horse designed by committee. It 
suffers from lack of market testing. Where was the competition? What 
were the alternatives? Did I get a vote? It's like you held an election 
with one serious candidate and one clown. (Yes yes, I know, we do it 
that way in the UK too, as it happens...) Would CSS be the way it is if 
there had been a competing model with a more intuitive framework?

Yes, I am simply wingeing now and wasting your time so I shall end. 
Sorry for the waste of bandwidth, and thanks for your patience and 
helpful responses.

> Anyways Gunlaug answered all the important stuff.

I want to hire him. Or his cows.

> PS really, those useless tips are quite uncalled for.

You are quite right, and I apologise. Although, I don't think that was a 
*completely* useless tip...

For highly accessible popup links, I find these just dandy;
<a href="somewhere.htm" onclick="window.open(this.href, 'newWin', 
'width=100,height=200'); return false;" title="Opens new window">
(shown without a user-defined popup function for reasons of clarity)
Using this.href means you only have to enter the destination URL once - 
where it belongs, making typos less of an issue and testing much easier. 
Alerting the user to the new window with a title attribute is courteous 
and satifies accessibility requirements to notify the user, to some 
extent, although please bear in mind that most popular screen readers 
currently don't read title attributes by default. Using onclick works in 
screen readers and with the keyboard; no need to add onkeypress or other 
obscure event handlers here.

More information about the thelist mailing list