CODEWITHSUNDEEP
htmlcss
TugboatCaptain
TugboatCaptain

Reputation: 4328

Nested div elements not positioning as expected

I have the following html on a test page and I cannot understand why the nested div's position themselves +10 pixels below their parent. I expect them to all line up directly on top of the parent div. I tried setting the box-sizing and the position values to various combinations but they refuse to move. What am I missing here?

<div class="test">
    <div class="aj1"></div>
    <div class="aj2"></div>
    <div class="aj3"></div>
</div>

enter image description here

http://jsfiddle.net/StrandedPirate/P8vAm/

Upvotes: 0

Views: 69

Answers (4)

noob
noob

Reputation: 641

You can do it by giving float. Check this http://jsfiddle.net/P8vAm/6/

Upvotes: 0

Hossein
Hossein

Reputation: 4559

Add this code:

.test div{
    vertical-align: top;
}

http://jsfiddle.net/x9z6H/

Upvotes: 0

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3501

just add line-height: 0; to .test

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Add vertical-align: top; to your .test div

demo

Or Add font-size: 0; to your .test

Upvotes: 3

Related Questions