Forums

StarZing

I have this form rendered adn have no control over how the divs are placed. I want all three elements in one row like this "Question(Label)" "Textbox" "Begin(button)" currently it renderes in three different lines, **i need some guidance or css snippets to arrange them in a single row

  <div>
      <div class="form-item form-type-textfield form-item-question">
          <label for="edit-question">
              Question
          </label>
          <input type="text" id="edit-question" name="question" value="" size="80" maxlength="128"
              class="form-text">
      </div>
      <input type="submit" id="edit-submit--2" name="op" value="Begin" class="form-submit"><input
          type="hidden" name="form_build_id" value="form-cd3wfZ41H0fvypv66NfP0PHNF6NiEtgx_ieJv5mkb7U">
      <input type="hidden" name="form_token" value="7CjL7A8IFwmc1RkxV96ufdvkkjZLEOF0IR1BPtwFjtA">
      <input type="hidden" name="form_id" value="answers_start_ask_form">
  </div>

Paulie_D

If you have an image of what you are trying to achieve it would be helpful.

The quickest option is to add

   label, input {
     float:left;
    }

Senff

You have a label ("Question") and an input field in one DIV (that will take up the whole width of the page), and then after that DIV comes your submit button (which will then start on the next line).

If you just move that submit button into that div, things should be lined up:

  <div>
    <div class="form-item form-type-textfield form-item-question">
      <label for="edit-question">
        Question
      </label>
      <input type="text" id="edit-question" name="question" value="" size="80" maxlength="128" class="form-text">
      <input type="submit" id="edit-submit--2" name="op" value="Begin" class="form-submit">
      <input type="hidden" name="form_build_id" value="form-cd3wfZ41H0fvypv66NfP0PHNF6NiEtgx_ieJv5mkb7U">
      <input type="hidden" name="form_token" value="7CjL7A8IFwmc1RkxV96ufdvkkjZLEOF0IR1BPtwFjtA">
      <input type="hidden" name="form_id" value="answers_start_ask_form">
    </div>
  </div>

If you have any CSS already (impossible for me to tell) then it might not work, but just make sure that the LABEL and INPUTS are either displayed inline, or if they're block-level elements, make them float left. I would suggest the latter:

  label, input {float:left;}

StarZing

@Paulie_D - i have created the images but do not know how to attach them here - @Senff - have no control over how teh rendered divs, i cannot move the the button within the div (containing the textbox and label)as you said.

Paulie_D

If you just use the existing code I gave you they will line up anyway. You might have to tweak the positioning by margins &/or padding but it does work.

See: http://codepen.io/Paulie-D/pen/CFEpA

Senff

@Paulie_D: I'd still recommend floating the DIV though. Right now it works but that's of course because the label and input escape the DIV, since it doesn't have a height. I mean, if you need to tweak, you might as well tweak it more. ;)

Paulie_D

@Senff If it doesn't hurt then why not? :)

StarZing

thank you so much Paulie_D, worked very well, you can see it working here http://www.onlinedoctors.in

treehouse : what would you like to learn today?

Forums

[Solved] Need CSS to layout three elements in a single row