Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need CSS to layout three elements in a single row

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #40089
    StarZing
    Member

    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


    class=”form-text”>

    type=”hidden” name=”form_build_id” value=”form-cd3wfZ41H0fvypv66NfP0PHNF6NiEtgx_ieJv5mkb7U”>

    #111081
    Paulie_D
    Member

    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;
    }

    #111082
    Senff
    Participant

    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:






    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;}

    #111086
    StarZing
    Member

    @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.

    #111088
    Paulie_D
    Member

    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

    #111093
    Senff
    Participant

    @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. ;)

    #111095
    Paulie_D
    Member

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

    #111140
    StarZing
    Member

    thank you so much Paulie_D, worked very well, you can see it working here
    [http://www.onlinedoctors.in](http://www.onlinedoctors.inhttp://www.onlinedoctors.in”)

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.