Simple CSS Problem

[frankG]

This is somewhere between a question and a rant about CSS, and is a noobish question. Apologies in advance.

The short form of my question is more-or-less: how can one make sure that a div "sizes" to contain all of the elements within the div (i.e. between the div start and end tags), in cases where normal CSS rules do not cause this to happen?

More specifically, as a programmer who is relatively new to design, I find myself often wanting to create a big div with position: relative, and with a number of sub-divs some of which have position: absolute (which will of course be relative to the containing "big" div). My problem comes from the fact that the little divs go where I want but, per CSS standards, the absolute div’s are taken out of the normal flow and so do not impact the "size" of the big div. So, for example, any background on the big div does not get rendered the way I would want it to.

I could fix this by giving the big div an explicit size, but suppose I don’t know the size?

Then, suppose I want a div below the big div (say, with a clear: both)? It would be nice if I could simply say: "behavior: rational" or something.

Why would anyone ever want CSS’s default behavior to be the way it is on this issue, and not one such that the big div "contains" the divs within it????

I know that my code is doing what it is supposed to do, and not what I want it to do, and I understand why, but anyway here is a simple example:
http://shorelinetech.com/10things.html

So again, is there a simple way to accomplish what I want? (that is: how can one have a div with sub-divs relatively-absolutely positioned, such that the containing div actually "contains"?)

Thanks in advance.

[frankG]

yes, that sounds like a good restatement of my question, although being able to "see" the div that contains the other divs is only part of the issue. I also want the containing div to have the "right" size and be part of normal document flow, so I can, for example, place a block element below it.

[frankG]

I don’t have a specific design in mind (although I did provide a link to a typical case). This is just a distilled version of my personal pet peeve about CSS — this is one place where CSS just refuses to do what I expect, and I come across the problem all the time. I end up doing a lot of work to figure out how to position divs, instead of it all just working.

Here is a typical use case where this comes up for me: A customer gives me a set of PSDs and wants a bunch of elements positioned exactly as in the PSD — to the exact pixel dimensions and inter-element distances. The customer also wants a header and a footer across all pages that sit in the top and bottom positions on the page. To me that _should_ scream to make the center of the page a relative div with absolutely positioned elements inside. Now here is the problem: suppose some elements in the center div are customer-editable — so the size will change and I can’t rely on _all_ elements having a fixed size. I then encounter the problem described.

So is the conclusion that there really is no way to setup a div so that it is forced to be the "right size" to contain all of the elements between the begin and end tag of the div? How about in the case where the div contains absolutely positioned elements inside of it? What if it contains floats? Under what circumstance will it be the case that a div has the size of the elements containing it? Does anyone but me find this to be a huge pain?

[frankG]

Thanks Bert. That makes sense, but what would you suggest in cases where one has several divs — some of known and fixed size, and say one with a variable size, in the case that one has an exact desired location for the divs of known size, and an precise desired location for the upper left corner of the variable-sized div, and a need to create a div that contains the lot?

For example:

Code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at justo. Nam sagittis. Curabitur at lectus vel augue tincidunt auctor. Donec cursus, quam vitae ultrices ullamcorper, odio sapien sodales risus, in hendrerit mauris dui at neque. Sed ullamcorper, turpis ut malesuada euismod, tellus tellus feugiat ligula, a congue lorem est a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend, velit vitae convallis auctor, leo nibh elementum dui, ac molestie pede enim in mauris. Sed sed enim in enim semper posuere. Phasellus odio. Donec massa nibh, blandit ut, pharetra vitae, vulputate id, nunc. Sed dictum ultricies quam. Vestibulum et est.

What I’d like is for the red div (id="a") to be of a size that it contains the green and blue divs (id="b" and id="c"). I don’t want to make assumptions about the height of the id="c" div. What would you suggest?

I know that in my simple example I can do this:

Code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at justo. Nam sagittis. Curabitur at lectus vel augue tincidunt auctor. Donec cursus, quam vitae ultrices ullamcorper, odio sapien sodales risus, in hendrerit mauris dui at neque. Sed ullamcorper, turpis ut malesuada euismod, tellus tellus feugiat ligula, a congue lorem est a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend, velit vitae convallis auctor, leo nibh elementum dui, ac molestie pede enim in mauris. Sed sed enim in enim semper posuere. Phasellus odio. Donec massa nibh, blandit ut, pharetra vitae, vulputate id, nunc. Sed dictum ultricies quam. Vestibulum et est.

but doesn’t that bother anyone other than me??? It just seems like such a hack. I want to be able to say where the divs go relative to the container, not relative to where the browser will otherwise choose to place them. However, I want the container to be a container (i.e. be of a size and placement so that it contains the elements within it).
So, is there a simple way?

[Author]

Posts