How do you align elements to the right with display inline-block?

Question

I have two div tags for my footer. I want one to be on the left of the page and one on the right. I'm using display:inline-block for both divs to be on the same line but Im not able to make them float.

<div id="footer">
    <div id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />  
        <p id="pValue"> # </p>
    </div>
    <div id="email">
       <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
       <p id="eValue"> # </p>
    </div>
</div> <!-- end of footer -->


#footer {
    width:100%;
    bottom:0;
    background-color:rgba(102,51,255,1);
}

#email {

    background-color:rgba(255,255,0,1);}

#phone, #email {
    display:inline-block;
    width:45%;
}

#pIcon, #pValue {
    display:inline-block;
}

#eValue, #eIcon {
    display:inline-block;
}

try this http://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div you have two divs with display-inline, so you can align justify that line with a little trick, then the first div will be on the left and the second div will be on the right — arieljuod, Feb 13 '14 at 16:54

score 2 · Answer 1 · answered Feb 13 '14 at 16:44

2

You need text-align property. For the one you want left to be left and right to be right

#phone, #email {
    display:inline-block;
    width:45%;
    text-align: left;
    vertical-align: middle; //If you need vertical middle alignment
}
#email {
    text-align: right;
}

Demo

answered Feb 13 '14 at 16:44

Rahil Wazir

10,007
11
42
64

Nice one thanks! i tried text-align before but it eems the vertical-align did the trick – user1719977 Feb 13 '14 at 17:04

score 0 · Answer 2 · answered Feb 13 '14 at 16:51

<div id="footer">
    <p id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />#</p>
    <p id="email">
        <img id="eIcon" src="img/email_icon.png" alt="Email icon" />#</p>
</div>

#footer {
    width:100%;
    bottom:0;
    background-color:rgba(102, 51, 255, 1);
}
#email {
    float:right;
    display:inline-block;
    background-color:rgba(255, 255, 0, 1);
}
#phone {
    display:inline-block;
}
#eIcon, #pIcon {
    vertical-align:bottom;
}

score 0 · Answer 3 · answered Feb 13 '14 at 16:59

You're not able to float them because of white spaces. White space counts if you're using display: inline; or display: inline-block;.

If you want to reach desired layout with display: inline-block; you have to change you HTML to this ugly (it is not a formatting error!):

<div id="footer"><div id="phone">
    <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />  
    <p id="pValue"> # </p>
</div><div id="email">
   <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
   <p id="eValue"> # </p>
</div></div> <!-- end of footer -->

I prefer much cleaner solution, using float and clear properties.

HTML

<div id="footer" class="clearfix">
    <div id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />
        <p id="pValue">#</p>
    </div>
    <div id="email">
        <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
        <p id="eValue">#</p>
    </div>
</div> <!-- end of footer -->

CSS

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

#footer {
    bottom:0;
    background-color:rgba(102, 51, 255, 1);
}
#email {
    background-color:rgba(255, 255, 0, 1);
}
#phone, #email {
    float: left;
    width:50%;
}
#pIcon, #pValue {
    display:inline-block;
}
#eValue, #eIcon {
    display:inline-block;
}

Here is a working fiddle. More info about a clearfix CSS trick is here.

score -2 · Answer 4 · edited Jun 20 '20 at 09:12

-2

email {

background-color:rgba(255,255,0,1); float:right; }

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 13 '14 at 16:39

user2991534

1

I wanted to avoid using float as the email logo and address shift up – user1719977 Feb 13 '14 at 16:44

How do you align elements to the right with display inline-block?

4 Answers4

email {