12

Browser is Firefox.

I have a list of 15 radio buttons. After displaying them like this:

<div class="abcd" style="margin-left:10px;"> <form id='some'....> <legend>Select Item type :</legend> <fieldset style="display:block;float:left;"> <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC ... </fieldset> <p> <input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;"> <button type="button" id="xxx" style="width:100;">Process</button> </p> </form> </div>

Everything is displaying in one line. I am not sure how to display the textbox under radio buttons with some space in between.?

pl help.

Improve this question
3
  • you should be using the <label> tag around your labels (like ABC) Commented Aug 15, 2012 at 21:18
  • why would you set an <input> element to display:block? Commented Aug 15, 2012 at 21:21
  • how to add <label> around ABC? Also in input i used block because i was trying to display it in next line. Commented Aug 15, 2012 at 21:53

4 Answers 4

Reset to default
21

The problem with your style is the float: left, you have to clear the "floatness". At the p tag, include the clear:both, it tells the browser that nothing can float at its left or right.

<div class="abcd" style="margin-left:10px;"> <form id='some'> <fieldset style="display:block;float:left;"> <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC </fieldset> <p style="clear:both"> <input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;"> <button type="button" id="xxx" style="width:100;">Process</button> </p> </form> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

paste

<div style="clear:both"></div>

after the fieldset.

Improve this answer

Comments

2

When using the float attribute you have to clear it so that other elements won't appear floating next to it. try adding clear: both to the css of the input box like this:

<input placeholder="Enter Name/Value" name="Name" id="NameID" size="40" style="clear:both; display:block;"/>
Improve this answer

Comments

0

Try adding the css rule to the radio buttons themselves. Like this:

<style type="text/css"> .group0 { display:block; } </style>

This assumes group0 is the group with all the radio buttons.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.