I have a web page with two columns:
- The narrow left column is a vertical navigation bar with a small (or ordinary) sized font
- The main right column contains the content, which has a mix of fonts (e.g. it starts with a large-size
Here is a screenshot of the top of the page:
My questions are:
- Don't you agree that it's important, that the top of the text in the left-hand-column (e.g. ".NET") should align with the top of the text in the right-hand column (e.g. "WYSIWYG")?
- Is there any design alternative (any way to change the design, perhaps add any extra elements to the design, to make that alignment less important or unimportant?
- If (or assuming that) it is important, how is it implemented?
I think it's wrong by two pixels at the moment, i.e. the right-hand text is two pixels too low.
I think it's difficult (perhaps impossible) to implement using CSS because:
- Font height is complicated
- The two bits of text are different sizes and different font faces
- The font families aren't even known at design-time (it depends on which fonts exist for the user's web browser)
Is this a known problem? Is there a solution?
Should I instead try to align the baselines of the two columns, to look something like this:
But I don't think I know how to implement that either, using CSS.
Normally it (the baselines of the two bits of text aligning) would happen automatically, except here the two bits of text are not really in the same line (they're not both inline the same line box, in one parent block): because each column is a separate