Welcome to WebmasterWorld Guest from 54.163.49.19

Forum Moderators: incrediBILL

Message Too Old, No Replies

Getting a <div> to fill a whole <td>

     
7:23 pm on Oct 13, 2010 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 11, 2004
posts:582
votes: 0


I have the following (simplified) code:


<table>
<tr>

<td>
<div style="border-right: 3px dotted black;">
Column1:

Lots of content in here, with divs, etc...

Longer than Column 2
</div>
</td>

<td>
<div style="border-right: 3px dotted black;">
Column 2:

Some shorter content here
</div>
</td>

</tr>
</table>



But for the Column 2, the <div> that creates the dotted horizontal line on the right side, only extends to the end of the content in the div.

So this the age old question: how do I stretch the <div> with the dotted horizontal line to match the size of the <td>?

Or maybe the 2nd <td> isn't even as big as the 1st (even though the Firebug highlighting functionality shows that the 2 <td> have the same vertical length.
8:09 pm on Oct 13, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 18, 2008
posts: 73
votes: 0


Your post has me quite confused. When you say horizontal dotted line, I assume you mean to say vertical? From your code your div should be the same size as its <td> container(firebug confirms this).

You can vary the height of either div to expand it down:

<table>
<tr>

<td>
<div style="border-right: 3px dotted black;">
Column1:

Lots of content in here, with divs, etc...

Longer than Column 2
</div>
</td>

<td>
<div style="border-right: 3px dotted black;min-height:200px">
Column 2:

Some shorter content here
</div>
</td>

</tr>
</table>


What exactly are you trying to do?
8:11 pm on Oct 13, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 18, 2008
posts: 73
votes: 0


I should have added in that code that if you want to keep the text aligned you could add style="vertical-align:top" to your column1 <td>
1:33 am on Oct 14, 2010 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9063
votes: 2


<td>
<div style="border-right: 3px dotted black;">

The usage of a div here seems redundant - you should be styling the td elements instead:

<td style="border-right: 3px dotted black;">


As the table cells are the same height the border will be the same length. You don't need to set the min-height at all.
12:08 pm on Oct 14, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 18, 2008
posts: 73
votes: 0


I was assuming (probably incorrectly) that he wanted column 2 to expand down past the end of column 1. For that he would need the div as each <td> would grow to match the other. Although in this case he could use just the <div> tags without the need for the table.