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.

you should be using the <label> tag around your labels (like ABC) — Sablefoste
– Sablefoste, Commented Aug 15, 2012 at 21:18
how to add <label> around ABC? Also in input i used block because i was trying to display it in next line. — Rajeev
– Rajeev, Commented Aug 15, 2012 at 21:53

Rich · Accepted Answer · 2019-04-25 09:32:07Z

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>

edited Apr 25, 2019 at 9:32

Rich

4,3886 gold badges45 silver badges78 bronze badges

answered Aug 15, 2012 at 21:22

Mauricio Souza Lima

6085 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1601479 · Accepted Answer · 2012-08-15 21:20:27Z

2

paste

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

after the fieldset.

answered Aug 15, 2012 at 21:20

user1601479

591 silver badge3 bronze badges

Comments

Rich · Accepted Answer · 2019-04-25 10:01:24Z

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;"/>

edited Apr 25, 2019 at 10:01

Rich

4,3886 gold badges45 silver badges78 bronze badges

answered Aug 15, 2012 at 21:19

JohnFromMiami

835 bronze badges

Comments

Phillip Schmidt · Accepted Answer · 2012-08-15 21:18:14Z

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.

answered Aug 15, 2012 at 21:18

Phillip Schmidt

8,8283 gold badges45 silver badges67 bronze badges

Collectives™ on Stack Overflow

CSS style=display:block not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related