Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Radio buttons not lining up

Posted by: sailormaysmom Apr 17 2017, 04:05 PM

I am trying to get my radio buttons to line up on the middle to the right side. The text on the left side of them is staggered but the buttons need to be in a vertical straight line going down. This is the code I have for my radio button...I am unsure if this is what I need or not.....
input.radio {
display: block;
float: left;
}

Here is the code for the labels and buttons themselves...
<fieldset><legend>Best Picture</legend>

<div>
<label for = "hills"></label>The Hills of Farmingdale</label>
<input type= "radio" name = "hills" id = "hills" value = "hills" />
</div>

<div>
<label for = "storm"></label>Storm Front</label>
<input type= "radio" name = "storm" id = "storm" value = "storm" />
</div>

<div>
<label for = "danger"></label>An Evening with Danger</label>
<input type= "radio" name = "danger" id = "danger" value = "danger" />
</div>

<div>
<label for = "moon"></label>Moon Over Bethpage</label>
<input type= "radio" name = "moon" id = "moon" value = "moon" />
</div>

</fieldset>

The labels are lined up to the left and the buttons follow....I need the buttons to line up to the middle right and the words to get go with the buttons...

ex......
The Hills of Farmingdale *
Storm Front *
An Evening with Danger *
Moon Over Bethpage * This is lining up with everything to the left but I need the buttons along with the text to line up to the right

of course the * represent a radio button....any help is appreciated....this is basic HTML....just stumped!

Posted by: pandy Apr 18 2017, 06:38 AM

You could float the radio buttons right. To keep it together limit the width of either the fieldset or the DIVs.

To stop the CSS from affecting other fieldsets, radio buttons and DIVs you may have I'd give the fieldset an ID so a specific selector can be used.

HTML

<fieldset id="foo"><legend>Best Picture</legend>

CODE

#foo input[type=radio] { float: right }

And either this

CODE

#foo { width: 20em }

or this.

CODE

#foo div { width: 20em }

Change the width to your liking, of course.