HOW TO VERTICALLY ALIGN THE ELEMENTS IN TWO DIVS?

Jayden Bell

Total Post:110

Points:774
Posted by  Jayden Bell
 1485  View(s)
Ratings:
Rate this:
Hi Everyone!

<div id="div1">

    <label class="someClass1">Price 1</label>
    <label class="someClass1">Price 2</label> 
    <label class="someClass1">Price 3</label> 
    <label class="someClass1">Price 4</label> 
</div>
<div id="div2">
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
</div>
I have two divs. One div contains <label> elements and another div contains <input> elements. The two divs are aligned horizontally. I need to align the 

labels and input elements vertically so that each label has it's input underneath.

I may achieve the above requirement by putting the <label> and <input> elements by placing them in rows/columns. But I require them to using <div>.

Could someone help me out on this ?

Thanks in advance! 
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: How to vertically align the elements in two divs?

    Hi Jayden!

    try this way!

    #div1 label.someClass1 { display: inline-block; margin: 0 5px; }
    #div1 label.someClass1, #div2 input.someClass2 { width: 100px; }
    #div2 input.someClass2 { margin: 0 0 0 10px; }

    Long answer, to make the exact look you pictured in your question, use HTML5 placeholder attribute and CSS3 border-radius:

    #div1 label {
      display: inline-block;
      font-weight: bold;
      margin: 0 5px;
    }
    #div1 label, #div2 input {
      width: 100px;
    }
    #div2 input {
      border-radius: 5px; -webkit-border-radius: 5px;
      border-width: 1px;
      padding: 2px;
      margin: 0 0 0 10px; 
    }
    .

    <div id="div1">
        <label>Price 1</label>
        <label>Price 2</label> 
        <label>Price 3</label> 
        <label>Price 4</label> 
    </div>
    <div id="div2">
        <input type="text" placeholder="Price"/>
        <input type="text" placeholder="Price"/>
        <input type="text" placeholder="Price"/>
        <input type="text" placeholder="Price"/>
    </div>

  1. Vijay Shukla

    Post:100

    Points:700
    Re: How to vertically align the elements in two divs?

    Hi Jayden!

    To get the divs on same row with inputs below them, use below css

    #div1 label { display: inline-block; }
    #div1 label, #div2 input { width: 100px; }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!