Register  |  Login



Question

Status: Closed Points: 90 Time: 06:41 - Jul 11, 2006  

dustPuppy

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?

Answer Discussion
Answer Summaries

 

Q&A System for Websites and Corporate Collaboration

Advertisement

  • Generates significant organic traffic for websites
  • Saves companies money, resources, and time

rcastagna

Date:: Jul 11, 2006

Time:: 15:49

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

dustPuppy

Date:: Jul 11, 2006

Time:: 16:23

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

rcastagna

Date:: Jul 11, 2006

Time:: 16:59

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!

dustPuppy

Date:: Jul 11, 2006

Time:: 22:43

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.

Question Answered

This question has been closed, 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 the Summary Area.

Answer 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:

Forgot Your Password?

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

Answer 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:

Forgot Your Password?

Ask a Question

Have a new question? Ask!

You have 100 characters to use



Top information technology Experts

View More

Rank

Expert

Points

1.

oracleofDelphi

520

2.

nidhi

510

3.

rcastagna

495

4.

PeterNZ

475

5.

theDude

250

6.

Anpanman

150

7.

dustPuppy

100

8.

multani.sarbjit

75

9.

bit2bit

60

10.

rberbe2002

60

Become an Expert

Register today to share your knowledge with the community and be recognized and rewarded for your contributions.


Register Here




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



Language Options

English:

www.quomon.com

Español:

www.quomon.es