Text in neighboring divs unaligned due to radio button?

Question

Below is one item in my page, which consists of the div containing two side by side divs. The first of which is an outline number to an entry in an outline, and the second item to the right of it is the content of that entry in the outline. The Controls_ContentPanel div can contain many different things, often some text paired with a single input control. In the case of the textbox, I had a problem in that the textbox's font styles were not inherited, and so it's font was larger, and thus the line-height was larger, and thus the text in the same div as the textbox used the larger line-height. However the line-height in the first div containing the outline number text was smaller, and thus the text in the span that was paired with the textbox was not aligned with the text in the outline number. I fixed this by jacking the line-height of both divs up to 22px.

That works, but now I have another problem when I have a radio button, because the input button's computed height is 13px and the text in the same div is moved down a few pixels and doesn't align with the outline text. If I reduce the height of the radio button to 11px it fixes the problem. If I make it larger it makes the problem worse, such that the text with the radio button is aligned at the bottom of the button, and is lower than the outline number text. I tried applying a CSS class to the RadioButton contorl that sets it's height to 11px, but the problem is the span tag gets the class, and the nested input tag does not inherit the height. I am developing a server control and I want to use CSS that does not globally effect all radio buttons on the page, but only the radio buttons I generate. So I had hoped to use Css Class, but it is not effecting the radio button itself since ASP.NET is rendering the css class on the span tag instead of the input tag. So either looking for a nice way to apply the css class to the input tag from my C# code, or some other way to get the text in both div's to align consistently.

Simplified snippet of code trying to apply CSS class to radio button control, but the generated html applies the css class to a span tag instead:

RadioButton radioButton = new RadioButton();
radioButton.CssClass = "Controls_RadioButtonInput";
this.Controls.Add(radioButton);

My CSS file:

/*The first three indent levels*/
.Controls_IndentLevel0
{
  font-weight: bold;
  font-size: 12pt;
}

.Controls_IndentLevel1
{
  font-weight: bold;
  font-size: 10pt;
}

.Controls_IndentLevel2
{
  font-weight: normal;  
  font-size: 8pt;
}

/*The div tag that contains each node*/
.Controls_NodePanel
{
  clear: both;
  font-family: MS Sans Serif;
  font-weight: normal;
  /*font-size: 8pt;*/
  font-style: normal;
  line-height: 22px;
  border: 1px;
  margin: 3px;
}

/*The div tag that contains the outline number*/
.Controls_OutlineNumberPanel
{
  float: left;
  line-height: 22px;
}

/*The div tag that contains the content of a node, such as a label and textbox, a table, or any of the other controls we've implemented.*/
.Controls_ContentPanel
{
  float: left;
  line-height: 22px;
}

/*Trying to fix a text alignment issue caused by large radio buttons*/
.Controls_RadioButtonInput
{
  height: 11px;
}

The generated HTML:

<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__10">
    <div class="Controls_OutlineNumberPanel" id="ID_1__10_0">
        <span id="ID_1__10_0_0">XIV.</span>
    </div>
    <div class="Controls_ContentPanel" id="ID_1__10_1">
        <div id="ID_1__10_1_0">
            <span disabled="disabled" class="Controls_RadioButtonInput">
                <input type="radio" disabled="disabled" value="ID_1__10_1_0_0" name="a" id="ID_1__10_1_0_0">
            </span>
            <span id="ID_1__10_1_0_1">
                text here for radio button selection
            </span>
        </div>
    </div>
</div>

Edit, I tried adding line-height to the spans directly, as a test, and no luck. According to firebug they were already inheriting the line-height, but I applied it directly just to make sure, and it had no improvement on the alignment:

<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__6">
    <div class="Controls_OutlineNumberPanel" id="ID_1__6_0">
        <span id="ID_1__6_0_0" style="line-height: 22px;">non0005</span>
    </div>
    <div class="Controls_ContentPanel" id="ID_1__6_1">
        <div id="ID_1__6_1_0">
            <span disabled="disabled" class="Controls_RadioButtonInput" style="line-height: 22px;">
                <input type="radio" disabled="disabled" value="ID_1__6_1_0_0" name="a" id="ID_1__6_1_0_0">
            </span>
            <span id="ID_1__6_1_0_1" style="line-height: 22px;">
                Competitive HC Only [Competitive 4% and/or 9% Housing Credits]
            </span>
        </div>
    </div>
</div>

Answer 1

Try making the inner spans have the same line-height as the divs (22px) and then setting the vertical-align to be middle.