Float right check boxes, buttons and inputbox

Question

I reckon it must be fairly simple but i can't seem to figure out how to get my floats right. The picture shows what i want vs what i have. If you provide an answer please provide the logic also. thanks.

        <div id="racks" style="overflow:auto">
        <div id="selStat">
        <p>No station selected</p>
        </div>
        <hr id="hrtest">
        <div id="rackAction">
        <p>Choose the type of card, then select which action to perform.</p>
        <div id="radio">
        Type:
        <div class="fr">
        <input type="radio" id="radioS" name="radio"><label for="radioS">S</label>
        <input type="radio" id="radioP" name="radio"><label for="radioP">P</label>
        <input type="radio" id="radioV" name="radio"><label for="radioV">V</label>
        </div></div>
        <p>Cardnumber:  <input id="cardNum" class="fr" type="number" size="1"/> </p>
        <p>Action: 
        <div class="fr">
        <button onClick="addRack()" type="button">Add</button>
        <button onClick="deleteRack()" type="button">Delete</button>
        </div></p>
        </div>
        </div>

CSS is as follow:

 .fr{
    float:right;
    }

image what I want vs What I have

You shouldn't have a `div` inside of a `p` tag. Check [here](http://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong) — Matthew Johnson, Dec 06 '13 at 15:17
seems like you should put "Action" inside the same div as the buttons. Personally I'd try to bust this out quickest by using divs instead of
then just put all the content for a single row in 1 div, then do the floating inside that. — jm0, Dec 06 '13 at 15:19

score 2 · Accepted Answer · edited May 23 '17 at 12:29

Syntactically, you can't have a div inside of a p tag. On that topic, check this SO Question. To get the elements on the same line, you can place the "Action" text in a seperate div, and float it left.

The HTML:

    <div id="racks" style="overflow:auto">
      <div id="selStat">
        <p>No station selected</p>
      </div>

      <hr id="hrtest">

      <div id="rackAction">
        <p>Choose the type of card, then select which action to perform.</p>
        <div id="radio">
          Type:
          <div class="fr">
            <input type="radio" class="margin-bottom" id="radioS" name="radio"><label for="radioS">S</label>
            <input type="radio" class="margin-bottom" id="radioP" name="radio"><label for="radioP">P</label>
            <input type="radio" class="margin-bottom" id="radioV" name="radio"><label for="radioV">V</label>
          </div>
        </div>

        <p>Cardnumber:  <input id="cardNum" class="fr" type="number" size="1"/> </p>

        <div class="fl">Action:</div> 

        <div class="fr">
          <button onClick="addRack()" type="button">Add</button>
          <button onClick="deleteRack()" type="button">Delete</button>
        </div>
      </div>
    </div>

The CSS:

.fr{
  float:right;
}
.fl {
  float:left;
}
.margin-bottom {
    margin-bottom:10px;
}

The fiddle.

Edit:

As per the comments, you can add a class to the radio buttons in question, and add additional margins or padding to the bottom of the radio buttons. I have updated the code to include the class additions and the CSS.

Seems promising, however it does not keep in mind the added height of the jQuery UI Radio's: http://imgur.com/jpcEBEC — Faarbhurtz, Dec 06 '13 at 15:37
Is that image how it is displaying with the updated code? How are you wanting that changed? — Matthew Johnson, Dec 06 '13 at 15:41
Yes it is, as you can see, the radio's are somehow ignoring the margin/padding a p-tag would normally give (as you can see for the pag tag with action: add delete in it) — Faarbhurtz, Dec 06 '13 at 15:43
Add a class to the buttons, and use it to add additional margins or paddings. I updated my answer to reflect that. I used 10px as an example, but you can adjust that to the desired height. — Matthew Johnson, Dec 06 '13 at 15:49
Thanks,
Cardnumber:
did the track, i added top padding to the cardnumber p tag — Faarbhurtz, Dec 06 '13 at 15:57

Float right check boxes, buttons and inputbox

1 Answers1