Question

On my HTML document, I have a message and radio-box. I want both to be displayed side by side. Message left, top aligned and radio-box right, top aligned. I tried using CSS “display:inline” for the container but that did not work. Here is the code:

HTML:

<div id="test-div">
  <p>Current time:  <span id="current-time"></span></p>
  <fieldset id="fieldset-options">
  <legend>My Options</legend>
  <input id="opt1" type="radio" name="grp-options" value="1">
  <label id="label-opt1" for="opt1">First Option</label><br/>
  <input id="opt2" type="radio" name="grp-options" value="2">
  <label id="label-opt2" for="opt2">Second Option</label><br/>
  <input id="opt3" type="radio" name="grp-options" value="3">
  <label id="label-opt3" for="opt3">Third Option</label><br/>
  </fieldset>
</div>

CSS:

#test-div {
    font-size : 18px;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
    //display: inline;        
}


#test-div #fieldset-options legend {
    font-size: 16px;
    font-weight : bold;
}

#test-div #fieldset-options {
    font-size : 14px;
    font-weight: normal;
    width: 350px;
    position: absolute;
    right: 0px;
}

This is jsfiddle link. Please tell me how to arrange this properly.
​

Answer 1

It’s a little unclear what exactly you are trying to achieve. Is it something like this?

http://jsfiddle.net/R6HHK/19/

I have simply given the p and the radiobox container a width, and the floated the elements.