TD - vertical alignment top AND bottom? [Archive]

View Full Version : TD - vertical alignment top AND bottom?

Andreas

06-28-2004, 12:06 PM

I got the following problem and haven't found a (good working) solution:

Let's say there is a table cell (td). Within this cell, I have two div elements.

The first one should be aligned ad the top of the cell, the second one at the bottom.

Any idea how this could be done?

Natch

06-28-2004, 12:15 PM

Vertical alignment is not easy to do in CSS - easier in Table layouts (bad Natch, bad Natch!) ...

Try
<td>

<div valign="top" style="height="50%">
</div>

<div valign="bottom" style="height="50%">
</div>

</td>

Andreas

06-28-2004, 01:09 PM

Doesn't work at alll.

- DIV tags don't have a valign-attribute.
- the style definition is invalid

So I modified the code:

<td>

<div style="height: 50%; vertical-align: top">
</div>

<div style="height: 50%; vertical-align: bottom">
</div>

</td>

But still doesn't work.

Natch

06-28-2004, 03:06 PM

'scuse me for being tired :p

Andreas

07-09-2004, 03:45 PM

*bump*

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Just a test</title>
</head>
<body>
<table border="1" style="height: 1px">
<tr>
<td>
some<br>
longer<br>
content<br>
here<br>
in this<br>
cell<br>
</td>
<td>
<table width="100%" style="height: 100%" border="0">
<tr>
<td valign="top">this should be at top</td>
</tr>
<tr>
<td valign="bottom">this should be at bottom</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 10px">
<td colspan="2">
</td>
</tr>
<tr>
<td>
some<br>
longer<br>
content<br>
here<br>
in this<br>
cell<br>
</td>
<td valign="top">
<table width="100%" style="height: 100%" border="0">
<tr>
<td valign="top">this should be at top</td>
</tr>
<tr>
<td valign="bottom">this should be at bottom</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Can somebody enlighten me why this does not seem to work with the Gecko-Engine?
How could I get it working?

Andreas

07-18-2004, 12:23 AM

*bump*

I'd really need a solution for this ...

Anyone?

Dark_Wizard

07-18-2004, 09:55 AM

Why not use CSS Positioning to work out your problem. Check this link -> http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning

Andreas

07-18-2004, 10:23 AM

Hmm ... can you give an example on how to use this?
I can't seem to get it working :(

If I create two divs with

position: fixed; top: 0px
position: fixed; bottom: 0px

within the cell, they they will be at top and bottom of the screen (in Firefox), or both at top of the cell (in IE).

Same for position: absolute

Dark_Wizard

07-18-2004, 10:36 AM

Hmmm...let me play with this a bit & get back to you.

Andreas

07-18-2004, 10:46 AM

Thanks a lot :)

Dark_Wizard

07-18-2004, 10:52 AM

Andreas

07-27-2004, 10:44 PM

*bump*
Still need a solution :(
Did you have success?

Dean C

07-27-2004, 10:55 PM

Turn on quirks mode in IE by sticking this at the top of your HTML documents:

<?xml version="1.0" encoding="iso-8859-1"?>

Then use height="100%" and have a spacer cell inbetween :)

e.g.

<table cellpadding="0" cellspacing="0" border="0" style="height: 100%;">
<tr>
<td>img1</td>
<td height="100%"> </td>
<td>img2</td>
</tr>
</table>

Andreas

07-27-2004, 11:02 PM

Doesn't work at all :(

If I use

<table cellpadding="0" cellspacing="0" border="0" style="height: 100%;">
<tr>
<td>This should be at top</td>
</tr>
<tr>
<td height="100%"> </td>
</tr>
<tr>
<td>This should be at bottom</td>
</tr>
</table>

It does work in IE (as the original code did too), but not in Firefox.

Dean C

07-28-2004, 08:27 AM

Hmm have you outlined the cell that this table is within with a border and checked it is 100% height of the container cell? (in both firefox and IE)

Xenon

07-28-2004, 01:05 PM

iirc you have to use the height attribute in the body tag as well.

Andreas

08-02-2004, 10:11 PM

*bump*
Still doesn't work :(