AJAX

Vertically Expanding a DIV inside a Table TD

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2009

Posts: 12

Reputation: UzuNarU is an unknown quantity at this point

Solved Threads: 0

UzuNarU

Offline

Newbie Poster

Vertically Expanding a DIV inside a Table TD

Nov 2nd, 2009

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.

~UzuNarU~ - Endless Possibilities

•

Join Date: Nov 2008

Posts: 14

Reputation: soldierflup is an unknown quantity at this point

Solved Threads: 0

soldierflup soldierflup is offline

Offline

Newbie Poster

Nov 4th, 2009

Why using DIV's in a table ?

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

html :

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<style>
#divone {
width: 50%;
float: left;
}
#divtwo {
width: 50%;
float: left;
}
</style>
</head>
<body>
<div id='divone'>bla bla bla</div>
<div id='divtwo'>bla bla bla</div>
</body>
</div>
<html>
<head>
<style>
#divone {
width: 50%;
float: left;
}
#divtwo {
width: 50%;
float: left;
}
</style>
</head>
<body>
<div id='divone'>bla bla bla</div>
<div id='divtwo'>bla bla bla</div>
</body>
</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.

•

Join Date: Jun 2009

Posts: 12

Reputation: UzuNarU is an unknown quantity at this point

Solved Threads: 0

UzuNarU

Offline

Newbie Poster

Nov 4th, 2009

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.

~UzuNarU~ - Endless Possibilities

•

Join Date: Nov 2008

Posts: 14

Reputation: soldierflup is an unknown quantity at this point

Solved Threads: 0

soldierflup soldierflup is offline

Offline

Newbie Poster

Nov 4th, 2009

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 :

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

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

•

Join Date: Jun 2009

Posts: 12

Reputation: UzuNarU is an unknown quantity at this point

Solved Threads: 0

UzuNarU

Offline

Newbie Poster

Nov 4th, 2009

•

Originally Posted by soldierflup

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 :
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<td width="251px" valign="top">
<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?

~UzuNarU~ - Endless Possibilities

•

Join Date: Nov 2008

Posts: 14

Reputation: soldierflup is an unknown quantity at this point

Solved Threads: 0

soldierflup soldierflup is offline

Offline

Newbie Poster

Nov 4th, 2009

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.

•

Join Date: Jun 2009

Posts: 12

Reputation: UzuNarU is an unknown quantity at this point

Solved Threads: 0

UzuNarU

Offline

Newbie Poster

Nov 4th, 2009

•

Originally Posted by soldierflup

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.

~UzuNarU~ - Endless Possibilities