homepage Welcome to WebmasterWorld Guest from 54.161.192.130
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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

10+ Year Member



 
Msg#: 4216397 posted 7:23 pm on Oct 13, 2010 (gmt 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.

 

dpinion

5+ Year Member



 
Msg#: 4216397 posted 8:09 pm on Oct 13, 2010 (gmt 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?

dpinion

5+ Year Member



 
Msg#: 4216397 posted 8:11 pm on Oct 13, 2010 (gmt 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>

encyclo

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



 
Msg#: 4216397 posted 1:33 am on Oct 14, 2010 (gmt 0)

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

dpinion

5+ Year Member



 
Msg#: 4216397 posted 12:08 pm on Oct 14, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved