Vertical alignment of DIVs in page layout

[Niels]

I use two DIVs in a page layout to present left-floating information in a footer together with a right floating page number:

<xhtml:div xhtml:class="fusszeile_content">lots of stuff here with variables which may break into a second line</xhtml:div>
<xhtml:div xhtml:class="fusszeile_pagenum"><MadCap:variable xhtml:name="System.PageNumber" />

CSS styles involved:

div.fusszeile_content
{
float: left;
}
div.fusszeile_pagenum
{
float: right;
}

I want to align the outcome in PDF output, but

• neither setting for vertical-alignment (baseline or top) shows any effect
• I do not see what kind of alignment is in place by default: The elements are not aligned in any way vertically

vertical alignment of two divs in footer via page layout.png

What am I missing?

[ChoccieMuffin]

What do you have for top margin and padding on your divs? Do either of the divs you showed us code for also include top margin or padding values? If so, that could be the problem.

Alternatively I can offer a more basic solution that might do the trick for you. In our page layouts, we use a table in which the content of the first cell is left-aligned and the content in the second cell is right-aligned.

[atomdocs]

+1 for using a table in this situation.

[Niels]

What do you have for top margin and padding on your divs? Do either of the divs you showed us code for also include top margin or padding values?

What do you mean with "also include"? The world outside of the brackets is a mysterious one being influenced by complex inheritance rules, I suppose. Everything should be the MadCap Flare default in the "outlaws"

[Niels]

@tomdocs:
When I was doing my careful research, every modern source told me that DIV is the new way, and table is the old one

[atomdocs]

Hi Niels, yes, you are right to follow that guidance. But there might be some exceptions, and this might be one

[ChoccieMuffin]

What do you have for top margin and padding on your divs? Do either of the divs you showed us code for also include top margin or padding values?

What do you mean with "also include"? The world outside of the brackets is a mysterious one being influenced by complex inheritance rules, I suppose. Everything should be the MadCap Flare default in the "outlaws"

I was wondering if you'd edited the bits of your CSS that you'd quoted, but it seems you hadn't. (Basically, I was just thrashing about looking to find possible causes, but that's not one.)

Would it be worth specifying "margin-top" or "padding-top" in your div, or maybe even "vertical-align" in "<MadCap | variable>"? It's possible that one is has "vertical-align: top;" as its default and a div has "vertical-align: center;" as default. Worth having a play, it'd be quick to do and undo.

[Niels]

Thanks for your tips. I use a table now as suggested. It seems much easier to control indeed (in particular in this context of the footer frame).

[Niels]

A lot of sadness remains, nevertheless. Not specifically by this one incident but just by the "generally suggested" happiness of "single source publishing".