[SUPER-SIMPLE] Div's width the width of the widest child

you need to set a container div tag that is set to an absolute position. And inside the container, set your child div tag's to be flexible.

example layouts:

http://blog.html.it/layoutgala/

http://blog.html.it/layoutgala/LayoutGala14.html

This isn't for a whole page layout, this is a tiny little bit:
http://localhost/tpcs/kav2test

I'm trying to get the #ka_container div to play nice, but I'm failing... If you can make that CSS style it the way I'm wanting it, I'll love you forever =)

You might try setting the divs margins to auto.

     margin:20px auto;

Like that you mean?

Gah. Sorry stupidly copied the local testing URL >_<

Here's that online

What's wrong with me?!
http://www.thepcspy.com/kav2test

THERE... *slaps himself*

Exactly. Is that what you're looking for?

At the moment, the divs are all making themselves 100%... What should happen is that it should only be as wide as the table.. I've set the table not to expand now so you can see what I mean.

It appears that the two images at the top determine the width of the body. The ka_container is basically what's left over after the naviation bar at the right is rendered. It's last on that horizontal plain so it gets what's left.

What if you float the ka_container div. I assume the bar div is floating right though I can't see where that is applied -- perhaps from an external css file. I'm not sure what would happen is everything on that plain is floating though.

Do you want the excess width to be a white hole between ka_container and bar?

>> It appears that the two images at the top determine the width of the body.
Not really... I define a width... and there's a background image and some other background images but that's immaterial here (i think)...

I realise what you're saying about what currently defines the width of the ka_container div... The problem is, this little box is to be used all over the place on lots of different websites with the same HTML and CSS, so I'd like to get it displaying in as fixed a width as possible.

What defines the desired width is:
a) how big the little square pictures are
b) how many columns

In short, the desired width is that of the table that holds the little images of small, cute, fuzzy animals (maybe with a bit of padding added) and not the width of the ka_container div's container.. See what I mean?

I'd rather not fix a width to the div because there will be box-problem issues with padding/margins/borders and this needs to be as cross-browser as possible. I'm getting to a stage where I'm considering a nested table instead of a div but the markup is so messy and its not what tables are meant for. I'd rather do this the proper way...

Ok I've just added a <table><tr><td> around it and its displaying how it should (except for the centering).

Now... How can I do that without the ugly table nonsense surrounding it?

How about an setting the left and right margin width to auto on the outer table?

I don't want the outer table... The outer-table is not going to ship around this thing because it is fugly.
>> See http://www.fugly.net/gallery.html for a definition of "fugly".

I need a way of making the ka_container div do what the outer table is doing via css.

I'm sorry, I don't remember what it looked like the other way. How does it look differently with the outer table? However it is different, that can be reversed through css.

You could also do a nested div. The outer div would take up the full width, then give the inner div auto left and right margin which should center it inside the outer one.

     display:table;

That's done it for Firefox and Opera... No love from IE though... And I'm not sure how legal it is doing something like that

would you know what the widest div would be in any instance?

if yes then a little javascript could do the trick.

http://images.thepcspy.com/personal/ee/ka_bad.gif

That's how it was without the display:table; or the outer-table. How it looks now (in firefox or opera) is how it *should* look.

The outer table did display perfectly, but the markup is inconprehensibly ugly, as I stated earlier.

I've tried adding another layer of div and the ka_container is still going at 100%

I've just read http://www.quirksmode.org/css/display.html and that seems to be tell me I cannot use this in IE... Which annoys the soul right out of my body =( It doesnt even work in IE7. I really wish MS would try and tackle their CSS compatability a little more seriously.

>> would you know what the widest div would be in any instance?
At rendertime, yes, but that's too late. This needs to work without essential display JS. Any JS there is purely optional and how well it displays is not really an option.