CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2267365
user2267365

Reputation:

align the div in same line

How to make the company logo div adjacebt to the name, address, email and iphone container... i tried giving display inline and float right but its not moving up... providing my code below....

http://jsfiddle.net/CfzSF/embedded/result/

<div style="width: 464px;">

    <div class="page-title">Company Name</div>
    <div style="font-size: 12px; color: #222;">Name:</div>
    <div style="font-size: 12px; color: #222;">Address:</div>
    <div style="font-size: 12px; color: #222;">Email:</div>
    <div style="font-size: 12px; color: #222;">Phone:</div>


</div>


<div style="border: 1px solid #1a4567; width: 100px; float: right;">
    <div>Company</div>
    <div>Logo</div>
</div>

Upvotes: 0

Views: 92

Answers (2)

What have you tried
What have you tried

Reputation: 11148

Use display: inline-block - to align elements horizontally

Also, you have the option of using float - it will have the same effect.

EDIT:

You should also add a float: left to the container holding the name, address, email, and phone fields. By giving the container holding these elements a float, the container will not take up the entire width of the screen, rather, the width of the widest element.

Working Example:

http://jsfiddle.net/ee6GW/4/

Upvotes: 4

Gordon Tucker
Gordon Tucker

Reputation: 6773

Put the float right before the non-floated item.

<div style="border: 1px solid #1a4567; width: 100px; float: right;">
    <div>Company</div>
    <div>Logo</div>
</div>
<div style="width: 464px;">
    <div class="page-title">Company Name</div>
    <div style="font-size: 12px; color: #222;">Name:</div>
    <div style="font-size: 12px; color: #222;">Address:</div>
    <div style="font-size: 12px; color: #222;">Email:</div>
    <div style="font-size: 12px; color: #222;">Phone:</div>
</div>

Upvotes: 0

Related Questions