Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

extent height of <div> to fill height of <td>

Status
Not open for further replies.
infekt

infekt

Programmer
Joined
Jan 30, 2006
Messages
7
Location
US
Ever since upgrading to Firefox 1.5, some existing code of my is no longer rendering correctly.

I need to expand the height of a <div> to vertically fill the height of a <td>. Note: the height of the <td> is not static, as the height is dynamically created based on the content within its neighbor <td> within the same table.

Here is an example:
bloody-example2.gif


Thanks,
infekt
 
Sort by date Sort by votes
And if you are still using tables... how come you even need a wrapper div?
 
Upvote 0 Downvote
I am using the following doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
And I am using a #wrapper (whether its a div or td, whatever works) because i need to align #top-box to the top of #wrapper, and #bottom-box to the bottom of #wrapper.

#wrapper has a tiling background image, where #top-box and #bottom-box are the corner images. #wrapper must extend to match the height of the content cell - which is why I am using a table.

Thanks.
 
Upvote 0 Downvote
But if #wrapper is applied to the td (and to wrapper you apply the background color and relative positioning), then you can simply align those boxes according to the td. No need for extra div.
 
Upvote 0 Downvote
right. I tried that. Dont work. #top-box and #bottom-box stay in the center of the <td>.

Here's my code:

#wrapper{
width:40px;
}

#top-box{
position:relative;
top:0px;
width:40px;
height:40px;
border:solid 1px #ff0000;
}

#bottom-box{
position:relative;
bottom:0px;
width:40px;
height:40px;
border:solid 1px #00ff00;
}

<table>
<tr>
<td id="wrapper">
<div id="top-box">top</div>
<div id="bottom-box"></div>
</td>
<td>
content<br />content<br />content<br />content<br />content<br />content<br />
</td>
</tr>
</table>

seems pretty logical, don't it?
 
Upvote 0 Downvote
It isn't really logical to me. Relative positioning is position according to the closest sibling in the document flow, so I don't really think that your bottom-box should be at the bottom. You will need to position that box via absolute positioning, if you want it at the bottom.
 
Upvote 0 Downvote
Believe me, I have tried that. What happens with "absolute" is it aligns itelf to the very bottom of the window! Like you said, "relative" positioning should be "relative" to the closest sibling in the document - which would be #wrapper right? But this does not happen.
 
Upvote 0 Downvote

Nope, sibling is the element before it and in the same level. So, for your code that would be top-box. And your thing adjusts to the bottom of the top-box, no? You were thinking of parent, not sibling. And parent plays a trick in what you failed to listed to before. Notice:
Myself said:
But if #wrapper is applied to the td (and to wrapper you apply the background color and relative positioning), then you can simply align those boxes according to the td. No need for extra div.
Click to expand...
Now, in the specs for absolute positioning it states that element will be taken out of document flow and positioned according to the first positioned (absolutely or relatively) parent element. If none is found, it is positioned according to the viewport (or browser window). Looking at your results with absolute positioning, you do not have any elements that have positioning applied to them and are parents of your would be element. Now, rereading my post above shows that I asked you to put the wrapper id on the td and apply relative positioning and background color to that id. This so far you did not want to do. Maybe this clarification will change your mind.
 
Upvote 0 Downvote
ok. I had relative positioning on my parent td#wrapper - but it had no effect, so i removed it to simplify my code. #bottom-box is not aligning with #top-box.

(I hope you realise I am very appreciative that you are going through this with me - as I really want to understand.)

So to clarify my understanding:

A Sibling:
<div id="sibling-1"></div>
<div id="sibling-2"></div>

A Parent:
<div id="parent">
<div id="child"></div>
</div>

And from what I understand, what I am lacking from my code I provided above, is positioning (relative or absolute), and absolute positioning, placed on #top-box and #bottom-box, correct?

Here is my latest code:

#wrapper{
position:relative;
background-color:#DDDDDD;
width:40px;
}

#top-box{
position:absolute;
top:0px;
width:40px;
height:40px;
border:solid 1px #ff0000;
}

#bottom-box{
position:absolute;
bottom:0px;
width:40px;
height:40px;
border:solid 1px #00ff00;
}

<table>
<tr>
<td id="wrapper">
<div id="top-box">top</div>
<div id="bottom-box">btm</div>
</td>
<td>
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
</td>
</tr>
</table>

Current results has #top-box breaking out of the td#wrapper at the top of the browser window, and #bottom-box at the very bottom of my browser window.

Take a look:

Thanks again.
 
Upvote 0 Downvote
Don't bump threads. It appears that table as a display object ignores positioning. So changing display to block seems to solve the issue. This works for me in IE6, Mozilla and Opera.
Code: 
<!-- comment -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>test</title>

<style type="text/css">
<!--

#wrapper{
 position:relative;
 background-color:#DDDDDD;
 width:40px;
}

#top-box{
 position: absolute;
 top: 0;
 width: 40px;
 height: 40px;
 border: solid 1px #ff0000;
}

#bottom-box{
 position: absolute;
 bottom: 0;
 width: 40px;
 height: 40px;
 border: solid 1px #00ff00;
}

-->
</style>

</head>
<body>
  
<table style="display: block; position: relative;">
 <tr>
  <td id="wrapper">
   <div id="top-box">top</div> 
   <div id="bottom-box">btm</div>
  </td>
  <td>
   content<br />content<br />content<br />content<br />content<br />content<br />
   content<br />content<br />content<br />content<br />content<br />content<br />
  </td>
 </tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
There it is! Thanks Vragabond.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
bdwilcox
  • Locked
  • Question Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
1K
bdwilcox
bdwilcox
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
3K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top