CSS: Getting 2 children DIVs on same line

3 Views

Am using Ninja Forms on a WP website. There are 2 different fields (textbox & submit button) that are separate DIVs, both children of single DIV.

They appear on consecutive lines and I cannot seem to get the on same line. Help?

Read More

Can see current code of the DIVs on the site: http://theroadmap.co/generation/ 

<div id="ninja_forms_form_2_all_fields_wrap" class="ninja-forms-all-fields-wrap">
<div class="field-wrap text-wrap label-above ninjacomment-wrap" id="ninja_forms_field_9_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_9_type" value="text">
<label for="ninja_forms_field_9" id="ninja_forms_field_9_label" class=""> </label>
<input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9">
<div id="ninja_forms_field_9_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
<div class="field-wrap submit-wrap label-left ninjasubmit-wrap" id="ninja_forms_field_10_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_10_type" value="submit">
<input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10">
<div id="ninja_forms_field_10_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
</div>

Modifications I’ve added so far: 

/* Ninja Form mods */
.ninjacomment {
background: #ffbf00 !important;
border: 3px;
color: black !important;
width: 50%;
}

#ninja_forms_field_9 {
margin-left: 0;
width: 30%;
float: left;
position: inline-block;
}


#ninja_forms_field_10 {
margin-left: 0;
float: right;
position: inline-block;
}

.ninja-forms-all-fields-wrap {
overflow: hidden;
}

Thanks!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. You can get elements on the same line several ways.

    Sample markup:

    <div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

    inline-block

    .child {
  display: inline-block;
  width: 40%; /* adjust */
}

    Floats

    .child {
  float: left; /* or right */
  width: 40%; /*adjust */
}

    display: table

    .parent {
  display: table;
  width: 100%;
}
.child {
  display: table-cell;
  width: 40%; /* adjust */
}

    white-space: nowrap

    .parent {
  white-space: nowrap /* children will stay on the same line no matter how wide */
}

  2. <div id="wrapper">
    <div id="left">
        <input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9"></input>
    </div>
    <div id="right">
        <input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10"></input>
    </div>

    CSS

    #wrapper {
    width:300px;
}
#left {
    float:left;
    width:146px;
}
#right {
    float:right;
    width:148px;
}

    Working Fiddle