CODEWITHSUNDEEP
htmlcss
user1768685
user1768685

Reputation:

html - positioning element to right side

i am trying to make something like this with css3 but i don't know how to position search button to be on the right side of 'result' div. not after the labels

what i am trying to achieve

        <div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
            <div class="result" style="display:inline;">
                <div style="height:100px; width:150px;">
                    Name:
                    <label>Mojtaba Iranpanah</label><br>
                    Email:
                    <label>00000000</label><br>
                    Phone Numner:
                    <label>00000000</label>
                </div>
                <div class="btn" style="float:right;">
                    <button>Search!</button>
                </div>
            </div>
        </div>

Upvotes: 0

Views: 4043

Answers (3)

emerson.marini
emerson.marini

Reputation: 9348

This should solve your problem:

<div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
    <div class="result" style=""> <!-- display:inline here has no effect -->
        <!-- Here is the place to put the display -->
        <div style="display:inline-block; height:100px; width:150px;">Name:
            <label>Mojtaba Iranpanah</label>
            <br>Email:
            <label>00000000</label>
            <br>Phone Numner:
            <label>00000000</label>
        </div>
        <!-- Here is the place to put the display -->
        <div class="btn" style="display:inline-block; vertical-align: middle; height: 100px;">
            <button>Search!</button>
        </div>
    </div>
</div>

Demo: http://jsfiddle.net/t92c2/2/

Upvotes: 1

Altaf Hussain
Altaf Hussain

Reputation: 5202

Try it like below :

<div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
            <div class="result" style="display:inline;">
                <div style="height:100px; width:150px; float:left">
                    Name:
                    <label>Mojtaba Iranpanah</label><br>
                    Email:
                    <label>00000000</label><br>
                    Phone Numner:
                    <label>00000000</label>
                </div>
                <div class="btn" style="float:left; margin-left:10px">
                    <button>Search!</button>
                </div>
            </div>
        </div>

Upvotes: 0

alireza
alireza

Reputation: 507

use this :

<div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
    <div class="result" style="display:inline;">
        <div style="height:100px; width:150px; display:inline-block; float:left;">
            Name:
            <label>Mojtaba Iranpanah</label><br>
            Email:
            <label>00000000</label><br>
            Phone Numner:
            <label>00000000</label>
        </div>
        <div class="btn" style="float:right;display:inline-block;">
            <button>Search!</button>
        </div>
    </div>
</div>

demo : http://jsfiddle.net/DZPEy/

Upvotes: 1

Related Questions