CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Slim
Slim

Reputation: 1744

Why I can not place 2 inputs side by side

I'm trying to make a basic design on a jquery modal dialog, but for now it is a great fail. I was never good in CSS and it seems really hard to me. Hrere is what I have tried so far:

Modal box HTML:

   <div class="screenSection">
        <div class="sectionHeader">
            <p>features</p>
        </div>
        <div class="lines">
           <div class="formElement">
               <label>overhaul</label>
               <input type="text" name="overhaul" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>included in the next installment</label>
               <input type="text" name="includedNI" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>first revision</label>
               <input type="text" name="firstRevision" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>last revision/ последно преразглеждане</label>
               <input type="text" name="interestFrequency" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label> frequency ofcollection/</label>           
               <select name="frequencyOfCol" id="frequencyOfCol" data-bind="value: editName" style="width: 4em;">               
                    <option>1</option> 
                    <option>2</option>  
                    <option>3</option>      
                    <option>6</option>  
                </select> 
           </div>           
        </div>
    </div>

And the CSS:

@CHARSET "UTF-8";

.formElement { height: 30px; float: left; height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; }
.formElement label { width: 17.89em; margin: 0.8em 0 0.1em 0.15em; font-size: 1.7em; display: block; }
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { float: left; border: 1px solid #CCCCCC; padding: 0.2em; height: 1.6em; width: 29.4em; }
fileSelection { width: 50em; height: 30px; }
td
{
    background: #A9D0F5;
    text-align: center;
    height:2em;
}
th
{
    height:2em;
}
table
{
    width: 98%;
    font-size: 1.2em;
    clear: both;
}

Full Jsfiddle here

Please help me to place the inputs side by side. I lost more than 3 hours on this problem already. I'm sure that I'm missing something really small, but as a beginner, I'm not able to spot it.

Upvotes: 0

Views: 156

Answers (4)

Hello World
Hello World

Reputation: 328

updated css

.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;}
.formElement label { font-size: 10px; width: 100%; min-width: 150px; display: inline-block; }
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 15px; width: 150px }
fileSelection { width: 50em; height: 30px; }

jsfiddle

Upvotes: 1

Ash King
Ash King

Reputation: 229

In your CSS remove text-align:center; and modify 

<td align="center">
    <button data-bind="click: $root.editProduct">Edit</button>
</td>

to

<td align="right">
    <button data-bind="click: $root.editProduct">Edit</button>
</td>

And

<td align="center">
    <button data-bind="click: $root.removeProduct">Delete</button>
</td>

to

<td align="left">
    <button data-bind="click: $root.removeProduct">Delete</button>
</td>

Upvotes: 0

noob
noob

Reputation: 641

For the DIVS which you want to put side by side give width (less than 50% ) and float:left . For example : .formElement { float:left; width:40%;}

Upvotes: 0

arunsignit
arunsignit

Reputation: 209

Set equal width for two divs....which are floated left....

Upvotes: 2

Related Questions