vb.org Archive - TD - vertical alignment top AND bottom?

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - TD - vertical alignment top AND bottom? (https://vborg.vbsupport.ru/showthread.php?t=66629)

Andreas

06-28-2004 11:06 AM

TD - vertical alignment top AND bottom?

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 11:15 AM

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

Try

Code:

<td>



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

</div>



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

</div>



</td>

Andreas

06-28-2004 12: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:

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 02:06 PM

'scuse me for being tired :p

Andreas

07-09-2004 02:45 PM

1 Attachment(s)

*bump*

HTML Code:

<!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-17-2004 11:23 PM

*bump*

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

Anyone?

Dark_Wizard

07-18-2004 08:55 AM

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

Andreas

07-18-2004 09: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 09:36 AM

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

Andreas

07-18-2004 09:46 AM

Thanks a lot :)

Dark_Wizard

07-18-2004 09:52 AM

Quote:

Originally Posted by KirbyDE

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

Ok, I've managed to get it right in IE but not firefox...have same issue as you did...let me play with this a little longer.

Andreas

07-27-2004 09:44 PM

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

Dean C

07-27-2004 09:55 PM

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

Code:

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

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

e.g.

Code:

<table cellpadding="0" cellspacing="0" border="0" style="height: 100%;">

<tr>

<td>img1</td>

<td height="100%">&nbsp;</td>

<td>img2</td>

</tr>

</table>

Andreas

07-27-2004 10:02 PM

Doesn't work at all :(

If I use

HTML Code:

<table cellpadding="0" cellspacing="0" border="0" style="height: 100%;">

<tr>

<td>This should be at top</td>

</tr>

<tr>

<td height="100%">&nbsp;</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 07: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 12:05 PM

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

Andreas

08-02-2004 09:11 PM

*bump*
Still doesn't work :(

All times are GMT. The time now is 02:04 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01682 seconds Memory Usage 1,756KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (2)bbcode_html_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (17)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: