Containers

Introduction

Here is a wander along some of the road in HTML/CSS land. It is designed to be travelled by using browsers that roughly obey the W3C recommendations for HTML 4.01 and CSS 2.1. That means, to put it bluntly, most modern browsers that are not Internet Explorer! The purpose is to exhibit effects close to the recommendations of the W3C.

A rough idea of what I am doing: Many people have trouble getting a handle on how floated children work, how they interact with their parent elements. There is much that is counter-intuitive due to false models imposing themselves on the mind. Perhaps the models and treatments here will help. When it comes to floats, it is actually not that simple to make easy to remember pictures or stories that fit the recommended rules in. One model gets one aspect, another gets another but they all tend to be just partial and not wholly consistent stories. This, I think, is why so many people have difficulty learning to apply html/css in an effort to not rely on tables for layout. Tables are much easier in conception, the model is known to a greater extent.

The empty container

We will start with the simplest of all things, a meaningless empty container, a div - a queer enough beast to entertain us a while.

Fig 1. <div style="width:0;"></div>

Just to the right of the bracketed number is a div container that exists in a curiously depressed state, it has no content and no borders. I suppose it does not make it more of a something to mention that its background colour is transparent. Or that its background image is set by default to repeat in both the horizontal and vertical direction. Considering it has no width or height and no background image, its existence is particularly tenuous. It's not much, that's for sure. Let's compare it with the following div:

Fig 2. <div style="width:500px;"></div>"

The div to the right of (2) does have a width (of 500px) and a background (grey). True, neither of these features can be seen. But, arguably, the div has more of a life than that next to (1) above. I expect the argument turns on whether you consider an invisible width is something more than no width. You might be thinking I am making this stuff up. But you can always check the source of this page to see how the div in (1) differs from the div in (2). But no need for now, luckily, there is a less boring way to see this difference and one that is possibly more instructive. Let us put an explicit height on them both, see how they might then appear and compare:

Fig 3. <div style="width: 0; height:3em;"></div>

Fig 4. <div style="width:500px; height:3em;"></div>

You can now see the width of the one in (4) but not the one in (3). Why is that? Because the one in (4) actually has a width as well as a height, whereas the one in (3) has no width at all. It is really not much to have a height if you have no width. But still, you can see the height to some extent by the vertical space taken up in (3). I know, it seems queer that the div in (3) has a height but no width, but you will come to accept this once you see how a div can have a width but no height. (It will be important to see this later to understand floats). To this end, let us reveal the two (sans height) by using borders:

Fig 5. <div style="width:0; border-top: 50px solid #c00; border-right: 250px solid #995; border-bottom:50px solid #c92; border-left: 250px solid #995;"></div>

Fig 6. <div style="width:400px; border-top: 50px solid #c00; border-right: 50px solid #995; border-bottom: 50px solid #c92; border-left: 50px solid #995;"></div>

See now the lack of width in (5), the lack of height in both (5) and (6) and the width in (6)? The borders may look a bit odd here because borders are not usually so thick and certainly not around so little content. You are seeing the mitring effect. (In Internet Explorer 6, never mind any in line content, the mere presence of borders triggers the div to have a height. Internet Explorer containers are different beasts to the main herd).

Next, we make the container a parent by introducing some children into it. It is pretty well all artificial insemination with this stuff.

table of contents | next page