Register  |  Login

Question Details    

   Question

Time: 06:41 - Jul 11, 2006     Asked by: dustPuppy      Status: Answered      Points: 90   

How to get a DIV to adjust its length to its content?

I'm in the process of adapting to a complete CSS driven layout, which means trashing all tables, where they aren't needed.
But I've run into something that I didn't find a solution for yet.
I want the same effect with a DIV that I get if i have a table cell that adjusts it's lenght to the content it has.
How do I do that?

And also, how can I get a DIV inside a table cell to affect the cells length if the DIV length gets bigger than the cell?

Ask a New Question

Become a Quomon Expert

Current Categories

 

Other Questions Needing Answers


   

Answer Discussion
Answer Discussion
Answer Summaries
Answer Summary
 
Hey, dustPuppy...

For the first part of the question - sizing to fit the content like a table cell does, you might find some limited success with setting the <div> width to "auto" such as:

<div style="width: auto;">My content here.</div>

But there are times where the best tool for the job is the table. I used to be in the habit of doing table driven layout for my sites but now do all CSS. I still find that a good ol' table is exactly what I need - especially when dealing with creating nice layout for forms on a page. There are some CSS solutions I've seen out there, but they're a bit kludgy.

Now, the second part of your question. I have not found a way for the <div> to programmatically affect the width of a <td> containing the <div>. If the <div> width is set to 100%, it should push out the width of the <td> up to the contraints of any width setting on the <td>. So, if your <div> is set to 100% but your <td> is set to 50%, the <td>'s setting will become the "hard" boundary. If the <td> has a width set to 100% or auto, it should size to its contents, in this case the 100% declaration of the <div> inside of it.

Let me know if this helps...

Ric

Expert:

rcastagna

Date:

Jul 11, 2006

Time:

15:49

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Thanks Ric.
You're using width as an example, I was actually interested in the height. should it work the same way?

Expert:

dustPuppy

Date:

Jul 11, 2006

Time:

16:23

 

Votes: Good (0) | Bad (0)
Login to rate this answer

ewwww....height. That's a moving target, I'm afraid. I have not found a solution that will work cross-browser for setting height, especially when desiring a 100% fill of an area. IE will most of the time allow a <td> to be set to height: 100% and it will fill the parent <div> as expected, but Firefox won't behave the same...it will only size the <td> to be 100% of its contents, not the container. Safari...well, it's Safari, it does whatever it feels like doing, and often with unpredictable results.

There have been some solutions that will take into account the visible height of the browser "viewport" and try to adjust the <div> and <td> based on a pixel specification instead of a percentage. Check out www.quirksmode.org for more information on how/why you may want to set the height in this manner.

This is one of those REALLY big "your mileage may vary" topics...

Good luck!

Expert:

rcastagna

Date:

Jul 11, 2006

Time:

16:59

 

Votes: Good (0) | Bad (0)
Login to rate this answer

hehe, thanks Ric, I was afraid that it was a complicated thing to achieve.
I'll look into the link you provided and post something here if I find something usefull.
Anyway, you get the points for helping me in the right direction.

Expert:

dustPuppy

Date:

Jul 11, 2006

Time:

22:43

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Question Answered

This question has been answered, and points have been rewarded to the following experts:

rcastagna: 90

You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.

 
No summaries have been submitted yet. Want to be the first?



Respond to this question:

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password

 

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password
   

"Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it


All Questions


Language Options

English:

www.quomon.com

Español:

www.quomon.es

Sponsors

Questions and Answers Software
Real Estate Postcards
Marketing Fulfillment