MyBB Community Forums

Full Version: Problem with vertcal align
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I'm trying to write a new postbit. First though, I'm just experimenting, with regular tables, so not in the postbit template yet.

This is what I'm experimenting with:

[Image: d0e98e1d.png]

I want to vertically align the word 'bottom' to the bottom of this block, without adding tables or td's around it, but can't seem to get it to work. There must be something I can do to get this word to the bottom.

This is the code of the table I posted above, as it is right now:

<table border="0" cellspacing="1" cellpadding="{$theme['tablespace']}" width="100%">
<table border="0" cellspacing="1" cellpadding="{$theme['tablespace']}" class="tborder">
<td class="tcat" style="background-color: lightblue"></td>
<tr>
<td class="trow2" style="width: 187px; white-space: nowrap; height: 200px" valign="top">
Top
<div valign="bottom">Bottom</div>
</td>
</tr>
</table>
</table>

Don't mind the width of 187px and the nowrap things, they aren't relevant in this table as of yet.
No one?
There is no valign attribute in div tag.Your div tag with vertical-align:bottom property won't align at bottom because td tag has vertical-align definied at top (all elements in td tag and child tags are going to be verticaled at top).

You can do this:

Remove valign="top" from td tag and vertical-align from div tag inside and add position:relative to .trow2 in your css (or you can add new class to td tag and add position:relative property to that new tag / you can use multiple classes).

Add two div tags in td tag and assign class for each of them



<td class="trow2 cell" style="width: 187px; white-space: nowrap; height: 200px">
<div class="top_position">Top</div>
 
<div class="bottom_position">bottom</div>
</td>


And in your css add
.cell {
position:relative;
}

.top_position {
position:absolute;
top:0;
left:0;
}

.bottom_position {
position:absolute;
bottom:0;
left:0;
}
Quote:<table border="0" cellspacing="1" cellpadding="{$theme['tablespace']}" width="100%">
<table border="0" cellspacing="1" cellpadding="{$theme['tablespace']}" class="tborder">

You don't need double table tag with width and class since width is definied in tborder class (width:100%; ).
I will try this, thanks Smile
And the double table tag I use is actually for another purpose.