abnormal spacing for radio input

Question

Ok so I've tried several previous SO answers and still no luck

Radio buttons and label to display in same line

Documentation on <FIELDSET> <LABEL> tags instead of using TABLE's?

Keep radio buttons with their labels on line breaks

There is something weird going on that's forcing some abnormal behavior for my radio. Would appreciate some help/guidance as to what I can do to fix this! Any help is appreciated.

Live Demo: http://iam.colum.edu/students/jordan.max/web-template(2)/index.html

main.html

<div id="container">

    <form action="welcome_get.php" method="get">
        <p class="textHeader"><strong> First Name </strong></p>
        <input name="firstname" type="text" oninvalid="invalidFName(this);" oninput="invalidFName(this);" placeholder="First Name" required />

        <p class="textHeader"><strong> Last Name </strong></p>
        <p> </p>
        <input id="lastName" type="text" oninvalid="invalidLName(this);" oninput="invalidLName(this);" name="lastName" placeholder="Last Name" required />

        <p class="textHeader"><strong> Email </strong></p>
        <input id="emailaddress" type="email" oninvalid="invalidEmail(this);" name="emailaddress" placeholder="anything@example.com"  required />

        <fieldset>
            <div class="some-class">
                <input type="radio" class="radio" name="x" value="y" id="y" />
                <label for="y">Thing 1</label>
                <input type="radio" class="radio" name="x" value="z" id="z" />
                <label for="z">Thing 2</label>
            </div>
        </fieldset>

        <input type="submit" value="Submit" id="submitButton" />

    </form>

</div>

CSS

score 0 · Accepted Answer · answered Mar 14 '14 at 00:04

You have the following in your stylesheet:

#container input, #container select, #container textarea {
    width: 450px;
    border: 1px solid #CEE1E8;
    margin-bottom: 20px;
    padding: 4px;
}

The width: 450px; is throwing out the layout of your radio field. You could try adding something like this after that statement to override it for radios:

#container input[type=radio] {
    width: auto;
}

abnormal spacing for radio input

1 Answers1