CSS style=display:block not working

Question

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.

Answer 1

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>