CSS: RadioButtonList Layout

For the most part, I love web development, but there are some things that I absolutely detest about it.

For example, something that should be straightforward such as getting horizontal radio buttons to appear in a neat and tidy way can be tough. Obviously your radiobutton labels will have different values and will therefore cause the list to have different widths - this can be messy if you have a few rows of radiobuttons.

In addition, the radiobutton label will by default wrap down to underneath the radiobutton itself which is hideous. That needs to be fixed.

You could try laying the controls out with a table or a series of fixed size divs, but you shouldn't need to. And using tables could be nasty.

CSS to the rescue! Create a class to use for your RadioButton controls and assign it.

.radioButtons {
    border:none;
    border-collapse:separate ;
}
.radioButtons input {
    float:left;
}
.radioButtons label {
    margin-left: 25px; 
    display: block; 
}
.radioButtons td{
    min-width:175px;
}

Then just lay out your control like this (an ASP RadioButtonList control is used here but you could use HTML literals too I guess):

<asp:RadioButtonList ID="rblYesNoMaybe" runat="server" RepeatDirection="Horizontal" 
CssClass="radioButtons" >
    <asp:ListItem>Yes</asp:ListItem>
    <asp:ListItem>No</asp:ListItem>
    <asp:ListItem>Maybe</asp:ListItem>
</asp:RadioButtonList>

Using this, you should find that your RadioButtons look better and that your label text doesn't wrap underneath the radiobutton input. You'll probably need to set the min-width property of the td to an arbitrary value to suit your page or site.