Avatar of OliWarner
OliWarner
 asked on

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

I'm feeling really stupid today... This isnt the first thing I've fallen over while on my HTML escapades but here we go again...

I've got a div and I want it to only be as wise as the widest child. As far as I can tell, Divs default to 100% width, and that's no good and a set width isnt much use to me either because the content is going to change, so I need something that will stretch-to-fit. I *know* its simple but I just cannot remember it toady.
Web Development

Avatar of undefined
Last Comment
Levi_Lansing

8/22/2022 - Mon
LeeHenry

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
OliWarner

ASKER
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 =)
walkerke

You might try setting the divs margins to auto.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
OliWarner

ASKER
     margin:20px auto;

Like that you mean?
OliWarner

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

Here's that online
OliWarner

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

THERE... *slaps himself*
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
walkerke

Exactly. Is that what you're looking for?
OliWarner

ASKER
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.
walkerke

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?
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
OliWarner

ASKER
>> 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...
OliWarner

ASKER
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?
walkerke

How about an setting the left and right margin width to auto on the outer table?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
OliWarner

ASKER
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.
walkerke

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.
walkerke

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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
OliWarner

ASKER
     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
VirusMinus

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

if yes then a little javascript could do the trick.
OliWarner

ASKER
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Levi_Lansing

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question