CODEWITHSUNDEEP
htmlcss
idris
idris

Reputation: 1049

Can't vertically align two divs

So I'm trying to align 2 divs side by side. Here's my markup 

    <div id="DIV_1">
    <div id="DIV_2">
    </div>
    <div id="DIV_3">
        <div id="DIV_4">
            <div id="DIV_5">
                0
            </div>
            <div id="DIV_6">
                Likes
            </div>
        </div>
        <div id="DIV_7">
            <div id="DIV_8">
                 <a href="#" id="A_9">1</a>
            </div>
            <div id="DIV_10">
                Followers
            </div>
        </div>
    </div>
</div>

And my CSS 

    #DIV_1 {
    height: 81px;
    width: 864px;
    perspective-origin: 432px 40.5px;
    transform-origin: 432px 40.5px;
    font: normal normal normal 16px/normal sans-serif;
}/*#DIV_1*/

#DIV_2 {
    height: 40px;
    width: 40px;
    perspective-origin: 20px 20px;
    transform-origin: 20px 20px;
    background: rgb(0, 157, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    font: normal normal normal 16px/normal sans-serif;
}/*#DIV_2*/

#DIV_3 {
    height: 41px;
    text-align: center;
    width: 187px;
    perspective-origin: 93.5px 20.5px;
    transform-origin: 93.5px 20.5px;
    font: normal normal normal 16px/normal sans-serif;
    margin: 0px 338.5px;
}/*#DIV_3*/

#DIV_4 {
    color: rgb(70, 70, 70);
    display: table-cell;
    height: 33px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    vertical-align: middle;
    width: 92px;
    perspective-origin: 46.5px 20.5px;
    transform-origin: 46.5px 20.5px;
    border-top: 0px none rgb(70, 70, 70);
    border-right: 1px solid rgb(146, 146, 146);
    border-bottom: 0px none rgb(70, 70, 70);
    border-left: 0px none rgb(70, 70, 70);
    font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
    padding: 4px 0px;
}/*#DIV_4*/

#DIV_5 {
    color: rgb(70, 70, 70);
    height: 17px;
    letter-spacing: 0.18000000715255737px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 92px;
    perspective-origin: 46px 8.5px;
    transform-origin: 46px 8.5px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_5*/

#DIV_6 {
    color: rgb(70, 70, 70);
    height: 16px;
    letter-spacing: 0.3479999899864197px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 92px;
    perspective-origin: 46px 8px;
    transform-origin: 46px 8px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_6*/

#DIV_7 {
    color: rgb(70, 70, 70);
    display: table-cell;
    height: 33px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    vertical-align: middle;
    width: 94px;
    perspective-origin: 47px 20.5px;
    transform-origin: 47px 20.5px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
    padding: 4px 0px;
}/*#DIV_7*/

#DIV_8 {
    color: rgb(70, 70, 70);
    height: 17px;
    letter-spacing: 0.18000000715255737px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 94px;
    perspective-origin: 47px 8.5px;
    transform-origin: 47px 8.5px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 500 12px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_8*/

#A_9 {
    color: rgb(102, 153, 255);
    letter-spacing: 0.18000000715255737px;
    text-align: center;
    text-decoration: none solid rgb(102, 153, 255);
    border: 0px none rgb(102, 153, 255);
    font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(102, 153, 255) none 0px;
}/*#A_9*/

#DIV_10 {
    color: rgb(70, 70, 70);
    height: 16px;
    letter-spacing: 0.3479999899864197px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 94px;
    perspective-origin: 47px 8px;
    transform-origin: 47px 8px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_10*/

I've tried changing the display and everything. For some reason I just can't get the square to be vertically aligned with the other following count. Also here's a demo http://jsfiddle.net/z6jAA/1/

Upvotes: 0

Views: 85

Answers (2)

paopao
paopao

Reputation: 39

Have you tried using the following properties and values for the CSS declaration? 

#idName { float: left; position: relative; }

Code example: HTML

<div id="div1">bla&nbsp;</div>   
<div id="div2"> bla2</div>

CSS

#div1 {
float: left;
position: relative;
}

#div2 {
float: left;
position: relative;
}

Upvotes: 0

jcaron
jcaron

Reputation: 17710

Add display: inline-block on #DIV_2 and #DIV_3, and remove the margin on #DIV_3.

Fiddle: http://jsfiddle.net/z6jAA/2/

Upvotes: 5

Related Questions