CODEWITHSUNDEEP
htmlcsslayout
filpa
filpa

Reputation: 3644

Put two input boxes and divs on same row

I have the following HTML:

        <div class="onerow">
            Site ID: <input type="text" name="siteId" id="siteId" class="k-textbox" data-bind="value: siteId"/>&nbsp;
        </div>
        <div class="onerow">
            <div id="select">
                <label for="state">View:</label>&nbsp;&nbsp;&nbsp;
                    <select id="state" data-role="dropdownlist" data-bind="value: state" data-option-label="Select State">
                        <option value="2">All</option>
                        <option value="1">Active</option>
                        <option value="3">All except deleted</option>
                    </select>
                    <input type="button" id="buttonsearch" value="Search" class="k-button" data-bind="events: {click: onSearchClick}"/>
            </div>
        </div>

Or, in jsFiddle: http://jsfiddle.net/j7ksuv9y/

I want to position both of those on the same row, one after the other. I've tried using style="float: right" but that only ends up placing the second input box to the far right of the screen, which is not what I want.

How might I accomplish this?

Upvotes: 0

Views: 13401

Answers (5)

hfatahi
hfatahi

Reputation: 203

Just use display:inline-block on your row div's

Upvotes: 1

Vish
Vish

Reputation: 169

There are 2 ways by which this can be achieved :-

1) One option as already mentioned above is by setting css to the class of the outer div as display:inline as mentioned

2) 

<div class="onerow">
            <label class="lbl">Site ID: </label>
<input type="text" name="siteId" id="siteId" class="k-textbox" data-bind="value: siteId"/>&nbsp;
<div class="clear" style="clear:both;"></div>
</div>

is by adding the below css :-

.lbl, .k-textbox
    {float:left}

In this clear both is mentioned so that it supports IE as well. This will work on all browsers and give the output as required.

Upvotes: 1

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this:

Demo

<div class="onerow">
            Site ID: <input type="text" name="siteId" id="siteId" class="k-textbox" data-bind="value: siteId"/>&nbsp;


                <label for="state">View:</label>&nbsp;&nbsp;&nbsp;
                    <select id="state" data-role="dropdownlist" data-bind="value: state" data-option-label="Select State">
                        <option value="2">All</option>
                        <option value="1">Active</option>
                        <option value="3">All except deleted</option>
                    </select>
                    <input type="button" id="buttonsearch" value="Search" class="k-button" data-bind="events: {click: onSearchClick}"/>

        </div>

Upvotes: 0

Aru
Aru

Reputation: 1870

just update the CSS like below:

.onerow{
    display:inline-block;
}

Fiddle Demo

Upvotes: 3

Nunners
Nunners

Reputation: 3047

Add the following css : 

.onerow {
    display: inline-block;
}

This will make the element display inline but also as a block.

Quote from MDN

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

Updated Fiddle

Upvotes: 2

Related Questions