Niranjan Godbole Niranjan Godbole - 1 month ago 11
CSS Question

How to align Div at right side bottom?

Hi I am developing MVC4 application. I have one main div inside that I have three div tags. First two div tags are displaying correctly as per my requirement. However my third div tag appears in right middle. I want it in left bottom side. I tried all the ways.

<div id="dialog" class="doc-verification-outer">
<div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
<div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
<div id="dialog-form" title="Reject Reason">
<div style="height:200px;">
<input type="hidden" value="_upload_id" id="id" />
<br />
<label for="name">Select your reason</label>
<select id="comments">
<option value="1">Incorrect Document</option>
<option value="2">document is not clear</option>
<option value="3">document is not valid</option>
<option value="4">other document</option>
</select>
<input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:right;">
</div>
</div>
</div>


Can someone give some insights regarding this? Thank you very much...

Answer

You can try this:

<div id="dialog" class="doc-verification-outer">
    <div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
    <div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
    <div id="dialog-form" title="Reject Reason">
        <div>
            <input type="hidden" value="_upload_id" id="id" />
            <br />
            <label for="name">Select your reason</label>
            <select id="comments">
                <option value="1">Incorrect Document</option>
                <option value="2">document is not clear</option>
                <option value="3">document is not valid</option>
                <option value="4">other document</option>
            </select>
            
        </div>
      <div style="margin-top:5px;"><input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="margin-left:122px;"></div>
    </div>
</div>