Two divs with inline-block doesnt work

Question

Why this two DIV dont show it inline? anything happens and the second DIV its show bottom...

#mac{
display: inline-block;
background-color:#000000;
    background-repeat: no-repeat;
padding-top:130px;
height:455px;
width:50%;
}
#mac2{

display: inline-block;
background-color:#000000;
    background-repeat: no-repeat;
padding-top:130px;
height:455px;
width:50%;
}

<!doctype html>
<html>
    <head></head>
    <body>
        <div id="mac"></div><div id="mac2"><img src="images/rocket.png"><span class="textomedio">Maximizamos tu ROI</span></div>
    </body>
</html>

http://jsfiddle.net/XCDsu/4/

Your code posted is different than your jsfiddler – gunr2171 Sep 19 '14 at 14:27 — gunr2171, Sep 19 '14 at 14:27
if you run the script you can see that no its inline – Rom Sep 19 '14 at 16:19 — Rom, Sep 19 '14 at 16:19

score 0 · Accepted Answer · answered Sep 19 '14 at 14:29

You need to add vertical-align:top; to #mac2:

#mac{
display: inline-block;
background-color:#000000;
background-repeat: no-repeat;
padding-top:130px;
height:455px;
width:50%;
}
#mac2{
display: inline-block;
background-color:#000000;
background-repeat: no-repeat;
padding-top:130px;
height:455px;
width:50%;
vertical-align:top;
}

<!doctype html>
<html>
    <head></head>
    <body>
        <div id="mac"></div><div id="mac2"><img src="images/rocket.png"><span class="textomedio">Maximizamos tu ROI</span></div>
    </body>
</html>

What's one over another? The example in the answer clearly shows them side by side. — j08691, Sep 19 '14 at 16:20

Two divs with inline-block doesnt work

1 Answers1