Question

got a question on radio buttons. Got a html code and css code below but what is happening is that I have 2 radio buttons and each radio button has a text next to it. The first radio button states “Male”and the other radio button states “Female”.

Now “Male” is display next to the radio button which is fine, but “Female” is displayed below the radio button. If I make the table where the whole radio buttons and text are stored wider, then both “Male” and “Female” are displayed under their radio buttons and not next to them.

So my question is what needs to be changed in my css/html code in order to display “Male” and “Female” next to their radio buttons?

Below is the html code:

<table id="replies">
<tr>
     <th colspan="2">
     Replies
     </th>
</tr>
<tr>
<td>Gender: </td>
<td align="left">
<div class="replytd"> 
<input type="radio" name="reply" value="male" class="replyBtn" /><span class="replyspan">Male</span>
</div>
<div class="replytd"> 
<input type="radio" name="reply" value="female" class="replyBtn" /><span class="replyspan">Female</span>
</div>
</td>
</tr>
</table>

below is the css code:

#replies{
    display:inline-block;
    vertical-align:top;
    min-width:15%;
    max-width:15%;
}

#replies th{
    border-collapse:collapse;
    border:1px solid black; 
}

#replies td{
    border-collapse:collapse;
    border:1px solid black; 
    padding:1%;
}

Answer 1

you can add this in your css code to change display mode about “div”

.replytd
{
float:left;
}