place 1 label top, 1 input bottom and 2 buttons left

137 views Asked by At

I would like to place 1 label at the top of an Input with two centered buttons (inside a div) on the right.

for the moment my code isn't flexible and I can't easily use my class anywhere on my webpage as It is strongly dependent the #.bu-container height that is far more large than it should be. Also I'm not sure to have a good result when resizing even more on different browsers.

Thanks in advance for your replies,

Here is my erroneous code:

#position {
  height: 500px;
}
.bu-container {
  margin: 10px;
  display: block;
  float: left;
  height: 50px;
  width: 400px;
  overflow: hidden;
}
.bu-container input {
  float: left;
}
.bu-container .bu {
  float: right;
  top: 0px;
  right: 50px;
  padding: 1px;
}
.bu-container button {
  height: 10px;
  display: block;
}
<div id="Position">
  <span class="bu-container">
             <span class="bu"> <button></button> <button></button> </span>
  <label>Height</label>
  <input id="LHeight" min="0" type="number" value="">
  </span>
  <span class="bu-container">
                <span class="bu"> <button></button> <button></button> </span>
  <label>Width</label>
  <input id="LWidth" min="0" type="number" value="">
  </span>
  <span class="bu-container">
                <span class="bu"> <button></button> <button></button> </span>
  <label>X</label>
  <input id="x" min="0" type="number" value="">
  </span>
  <span class="bu-container">
            <span class="bu"> <button></button> <button></button> </span>
  <label>Y</label>
  <input id="y" min="0" type="number" value="">

  </span>
</div>

1

There are 1 answers

2
vinrav On BEST ANSWER

Check this out....

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
#position {
  height: 500px;
}
.row-container {
  
  display: inline-block;
  text-align: justify;
  margin: 0px auto;
  width: 100%;
  margin-top:10px;
  margin-bottom:10px;
  border:5px solid #ccc;
  padding:10px;
}
.input-text-container {
  display: inline-block;
  width: 50%;
 
}
.input-text-container input {
  width: 100%;
}
.button-container {
  width: 49%;
  display: inline-block;
  margin: 0px auto;      
  text-align:center;
}
.button-container button {


}
<div id="Position">
  <div class="row-container">
    <div class="input-text-container">
      <label for="LHeight">Height</label>
      <input id="LHeight" min="0" type="number" value="">
    </div>
    <div class="button-container">
      <div>
        <button>button1</button>
      </div>
      <div >
         <button>button2</button>
      </div>       
    </div>
  </div>
      </div>