How to vertically align the elements in two divs?

Jayden Bell242105-Apr-2013

Hi Everyone!

<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>

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!

asp.net mvc

Updated on 05-Apr-2013

Jayden Bell

Can you answer this question?

Answer

2 Answers

Vijay Shukla

05-Apr-2013

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; }

AVADHESH PATEL

05-Apr-2013

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;

}

<label>Price 1</label>

<label>Price 2</label>

<label>Price 3</label>

<label>Price 4</label>

</div>

</div>

forum

How to vertically align the elements in two divs?

Jayden Bell

2 Answers

Liked By