CODEWITHSUNDEEP
csscss-float
Lorraine Bernard
Lorraine Bernard

Reputation: 13400

How to place two DOM elements on the same line

I am trying to put on the same line $('.prize-item input') and $('.prize-edit')

Here is the DOM structure (1) and the CSS code (2).

I tried to sue the display:inline-block with no success.

The prerequisite is the following:
1) You must not use position absolute.
2) Resizing the screen, the distance between the button and the input box should not change.
3) The DOM structure should be changed only if it is not possible to obtain the result I requested with CSS.

Demo: http://jsfiddle.net/jBme9/8/

(1)

<div class="control-group">
    <div class="controls">
        <div class="prize-edit">
            <button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
        </div>
        <div class="prize-item">
            <div class="control-group ">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="form-prize-item-name" value="prize same line">
                </div>
            </div>
        </div>

    </div> 
</div>

​

(2)

.prize-edit {
    float: right;
    display: inline-block;
}

.prize-item input {
    float: left;
    display: inline-block;
}

Upvotes: 0

Views: 1568

Answers (2)

Rockbot
Rockbot

Reputation: 973

I think it´s not possible with this DOM structure. You want to have something like this:

<div class="aWrapper">
  <div class="control-group">
    <label class="control-label">Name</label>
    <div class="controls">
      <div class="prize-edit">
        <button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
      </div>
      <div class="prize-input"><!-- I renamed the class! -->
                <input type="text" class="form-prize-item-name" value="prize same line">
      </div>
    </div>
  </div>
</div>

additional:

.label { diplay: block; }
.prize-edit { float: right; width: 20%; // adjust with paddings etc. }
.prize-input { float: left; width: 80% // adjust ... }

Upvotes: 0

Giona
Giona

Reputation: 21114

You can use relative positioning. Please adjust these values for your real page.

Demo

Code:

.controls button {
    float: right;
    position:relative;
    top:38px;
    right:17px;
}

I used pixels 'cause you're using pixels, but this can be done with ems too.

To push the button outside the input, add another class to the input's wrapper. Let's call it "controlsWrapper".

So that you'll have in html:

<div class="controls controlsWrapper"><input...other stuff...></div>

And in CSS

.controls button {
    float: right;
    position:relative;
    top:38px;
}
.controlsWrapper {
    box-sizing: border-box;
    width:100%;
    padding-right:40px; /* width of the button + some space */
}

Check the demo

Upvotes: 2

Related Questions