Question 313769 in Html Question posted in
Some basic documentation can be found here.

Html – div moving to right instead of left

i have multiple div which is getting stacked in rows, each has have two divs.

but div is not aligned properly, and moving to right , instead of left.

 <div className="col-md-6 adminForm borderItem" >
      <label htmlFor="description">Date Added</label><span className='errorMsg'>  {fuelStock.addedDttmError}</span>
      <DatePicker selected={addedDTTM} placeholderText="Select a date" timeInputLabel="Time:" name="added_dttm" id="added_dttm" className="form-control" onChange={date => handleDttmOfSale(date)} dateFormat="dd/MM/yyyy h:mm aa" showTimeInput />
    </div>

    <div className="col-md-6 adminForm borderItem">
      <label htmlFor="volume">Fuel Price</label><span className='errorMsg'>  {fuelStock.fuelPriceError}</span>
      <NumberInput autoComplete="off" id="fuelPrice" name="fuelPrice" isDecScaleEnabled={true} decimalScale={2}
        value={fuelStock.fuelPrice} className="form-control"
        onChange={(value) => handleInputChange(value, "fuelPrice")}></NumberInput>
    </div>
    <div className="col-md-6 adminForm borderItem" style={{position:'relative'}}>
      <label htmlFor="commission">commission</label><span className='errorMsg'>  {fuelStock.commissionError}</span>
      <NumberInput autoComplete="off" id="commission" name="commission" isDecScaleEnabled={true} decimalScale={2}
        value={fuelStock.commission} className="form-control"
        onChange={(value) => handleInputChange(value, "commission")}></NumberInput>
    </div>


.adminForm {
   float: left;
   padding-top: 10px;
 }

but i am getting as below

enter image description here

how to align move div to left, i know the above has occupied some space, but i need to move to left,i tried positions and float:left , but didnt work

Tags:

2

Answers


  1. 0

    as i see you are working with bootstrap so you don’t need to add any extra styling for left just follow the bootstrap structure you will get what you want like this

    <div class="container">
 <div class="row">
  <div class="col-md-6 mb-3">first div</div>
  <div class="col-md-6 mb-3">second div</div>
  <div class="col-md-6 mb-3">third div</div>
  <div class="col-md-6 mb-3">fourth div</div>
 </div>
</div>

    use mb-3 class for margin you don’t need to additionally add **adminForm ** style for your code it will work like this hope you added container and row above the code for getting the styling of container and row

    Note : add container and row before using col class

    <div className="col-md-6  borderItem" >
  <label htmlFor="description">Date Added</label><span className='errorMsg'>  {fuelStock.addedDttmError}</span>
  <DatePicker selected={addedDTTM} placeholderText="Select a date" timeInputLabel="Time:" name="added_dttm" id="added_dttm" className="form-control" onChange={date => handleDttmOfSale(date)} dateFormat="dd/MM/yyyy h:mm aa" showTimeInput />
</div>

<div className="col-md-6  borderItem">
  <label htmlFor="volume">Fuel Price</label><span className='errorMsg'>  {fuelStock.fuelPriceError}</span>
  <NumberInput autoComplete="off" id="fuelPrice" name="fuelPrice" isDecScaleEnabled={true} decimalScale={2}
    value={fuelStock.fuelPrice} className="form-control"
    onChange={(value) => handleInputChange(value, "fuelPrice")}></NumberInput>
</div>
<div className="col-md-6  borderItem">
  <label htmlFor="commission">commission</label><span className='errorMsg'>  {fuelStock.commissionError}</span>
  <NumberInput autoComplete="off" id="commission" name="commission" isDecScaleEnabled={true} decimalScale={2}
    value={fuelStock.commission} className="form-control"
    onChange={(value) => handleInputChange(value, "commission")}></NumberInput>
</div>
    Login or Signup to reply.
  2. 0

    To align the divs to the left, you can use the following CSS:

    .adminForm {
  float: left;
  padding-top: 10px;
  clear: left;
}

    The clear: left; property will prevent the divs from wrapping around other elements that are floated to the left.

    Here is a breakdown of the CSS:

    • float: left;: This property floats the div to the left, allowing it to move to the left of other elements.
    • padding-top: 10px;: This property adds 10 pixels of padding to the top of the div, creating some space between the div and the element above it.
    • clear: left;: This property prevents the div from wrapping around other elements that are floated to the left.

    You can also use the margin-left property to move the div to the left. For example:

    .adminForm {
  float: left;
  padding-top: 10px;
  margin-left: 10px;
}

    The margin-left property will add 10 pixels of space to the left of the div, moving it to the left.

    I hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search