943,992 Members | Top Members by Rank

Ad:
Nov 2nd, 2009
0

Vertically Expanding a DIV inside a Table TD

Expand Post »
I looked around for a solution on the site but I couldn't find exactly what I was looking for so...

On my website I have a Table with 2 columns, each column has a DIV in it. How can I make it so that each of the DIVs take up the entire space in the Table TD? I can post an example or link to the site itself...if thats allowed.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
UzuNarU is offline Offline
32 posts
since Jun 2009
Nov 4th, 2009
0
Re: Vertically Expanding a DIV inside a Table TD
Why using DIV's in a table ?

You can get the same result by floating the two divs with CSS.

html :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <style>
  4. #divone {
  5. width: 50%;
  6. float: left;
  7. }
  8. #divtwo {
  9. width: 50%;
  10. float: left;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id='divone'>bla bla bla</div>
  16. <div id='divtwo'>bla bla bla</div>
  17. </body>
  18. </div>

If you persist in keeping the divs in a table column I don't see the problem because the row of the table will automatically expand to the content of the largest div.

An example of your code would the interesting to see what you want to achieve.
Last edited by soldierflup; Nov 4th, 2009 at 6:02 am.
Reputation Points: 14
Solved Threads: 4
Light Poster
soldierflup is offline Offline
26 posts
since Nov 2008
Nov 4th, 2009
0
Re: Vertically Expanding a DIV inside a Table TD
Umm, you can take a look at the site: http://www.uzunaru.com

If I float the DIVs does that mean they will appear side by side? Sorry, I'm not really very good at doing more fancy web templates/layouts. Usually I just do plain sites but wanted to try something different.
Reputation Points: 10
Solved Threads: 0
Light Poster
UzuNarU is offline Offline
32 posts
since Jun 2009
Nov 4th, 2009
0
Re: Vertically Expanding a DIV inside a Table TD
If you float the divs the will appear side by side. I've been looking at your code and I suppose you want to make appear the right div at the top of the column in your table. Change your code from the right column of your table to :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <td width="251px" valign="top">

This will put the div inside your column at the top of the column.
Last edited by soldierflup; Nov 4th, 2009 at 9:36 am.
Reputation Points: 14
Solved Threads: 4
Light Poster
soldierflup is offline Offline
26 posts
since Nov 2008
Nov 4th, 2009
0
Re: Vertically Expanding a DIV inside a Table TD
If you float the divs the will appear side by side. I've been looking at your code and I suppose you want to make appear the right div at the top of the column in your table. Change your code from the right column of your table to :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <td width="251px" valign="top">

This will put the div inside your column at the top of the column.

Hmm ok, that solves one problem. Now the problem of the Nav column not expanding to the whole available area in the right column is the second. If I have to I will check out this "float". Quick Q~ about floating DIVs do that need a containing DIV?
Reputation Points: 10
Solved Threads: 0
Light Poster
UzuNarU is offline Offline
32 posts
since Jun 2009
Nov 4th, 2009
0
Re: Vertically Expanding a DIV inside a Table TD
The div's don't need a containing div because they are already in a containing div (container).
To make sure that the next div (footer) will appear correctly is adding the next statement under the second floated div : <br style="clear: both;" />

If you want to, I'll send you a redesigned example of your page.
Reputation Points: 14
Solved Threads: 4
Light Poster
soldierflup is offline Offline
26 posts
since Nov 2008
Nov 4th, 2009
0
Re: Vertically Expanding a DIV inside a Table TD
The div's don't need a containing div because they are already in a containing div (container).
To make sure that the next div (footer) will appear correctly is adding the next statement under the second floated div : <br style="clear: both;" />

If you want to, I'll send you a redesigned example of your page.
Sure you can do that if you want to. It would greatly help me.

Also my footer is outside my container because for some reason it was getting blended into the News/Navigation DIVs.
Reputation Points: 10
Solved Threads: 0
Light Poster
UzuNarU is offline Offline
32 posts
since Jun 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: IE Error (as per the norm): Object Expected
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: change link border





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC