CODEWITHSUNDEEP
htmlcss
RD Harles
RD Harles

Reputation: 58

CSS and radio buttons

I'm close but I can't get my radio buttons to line up next to a label. I've change the css a million times but I can't seem to get all my text boxes, radio buttons and commment box to line up under each other. Specifically, the second radio button isn't lining up with the rest of the stuff.

Any ideas? Appreciate it!

Here's the code in action: http://jsfiddle.net/NpJ55/

My html and css:

<fieldset>
    <label for="name" class="formlabel">Name:</label>
    <input id="fName" name="name" type="text" class="forminput" />

    <label for="co" class="formlabel">Company:</label>
    <input id="fCo" name="co" type="text" class="forminput" />

    <label for="email" class="formlabel">Email:</label>
    <input id="fEmail" name="email" type="text" class="forminput" />

    <label for="phone" class="formlabel">Phone:</label>
    <input id="fPhone" name="phone" type="text" class="forminput" />

    <label for="contact" class="formlabel">Contact:</label>
    <div id="radio_form">
        <input id="radio_form_1" name="Sales" type="radio" value="Sales" />
        <label for="radio_form_1">Sales</label>
        <input id="radio_form_2" name="Technical" type="radio" value="Technical" />
        <label for="radio_form_2">Technical</label>
    </div>

    <label for="name" class="formlabel">Comments:</label>
    <textarea name="comments" rows="5" cols="50" class="forminput"></textarea>
    <input id="submit" name="submit" type="submit" class="forminput" value="Submit" />
</fieldset>

.formlabel {
    clear:left;
    display:block;
    float:left;
    margin:0 0 1em 0;
    padding:0 0.5em 0 0;
    text-align:right;
    width:8em;
}

.forminput {
    float:left;
    margin:0 0.5em 0.5em 0;
}

fieldset {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}

input, textarea {
    -moz-border-radius:5px;
    border-radius:5px;
    border:solid 1px #999;
    padding:2px;
}

#submit {
    background:grey;
    height:30px;
    width:100px;
    border:1px;
    color:white;
    font:family:Arial;
    font-weight:bold;
    font-size:15px;
    cursor:pointer;
}

#submit:hover {
    background:#4498e1;
}

#radio_form input {
    float: left;
}
#radio_form label {
    float: left;
}
#radio_form label + input {
    clear: both;
}

Upvotes: 2

Views: 1038

Answers (5)

cantera
cantera

Reputation: 24985

You can avoid having to fight with floats by using inline-block instead

http://jsfiddle.net/NpJ55/8/

enter image description here

.fieldwrap {
    margin: 15px 0;
}

.formlabel {
    display: inline-block;
    vertical-align: middle;
    text-align:right;
    width:8em;    
    font-size: 24px;
}

.radiolabel {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    margin-right: 15px;
}

.radio {
    display: inline-block;
    vertical-align: middle;
}

.forminput {
    display: inline-block;
    vertical-align: middle;
}

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58521

Well - without making too many changes... http://jsfiddle.net/billymoon/NpJ55/3/

#radio_form{
    float: left;
}

And drop the #radio_form ... rules!

Upvotes: 2

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a Fiddle

#radio_form {
  float: left;
  margin-bottom: 13px;
}

input[type="radio"] {
  display: block;
  margin: 3px 7px 0 0;
}

Upvotes: 1

Jason Nichols
Jason Nichols

Reputation: 3760

Or conversely, add the rule:

#radio_form {
    float: left;
}

Fiddle

Upvotes: 0

j08691
j08691

Reputation: 207861

Remove the rule:

#radio_form label + input {
    clear: both;
}

jsFiddle example

Upvotes: 1

Related Questions