CODEWITHSUNDEEP
htmlcss
Dot NET
Dot NET

Reputation: 4897

Unable to get element under other elements

I have an issue formatting some HTML. Basically I have a large number of listboxes which are hidden once the page is loaded, and have placed them in HTML tables for now. I am aware that this is not good practice, but this is how I have received them and since there are over 100, I cannot realistically change their HTML code.

I would like for the </hr> and two buttons on the right of the image, to appear under the listboxes.

Here is a jsfiddle of the code.

How can this be formatted for the buttons to appear underneath, regardless of the height taken up by the listboxes? i.e. they will always appear underneath.

Upvotes: 0

Views: 66

Answers (3)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28548

Here is demo

try this:

<form>
    <div style="padding-top: 2%; float:right;clear:both;"> <b>Select Product:</b>

        <select name="cmbProducts" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;cmbProducts\&#39;,\&#39;\&#39;)&#39;, 0)" id="cmbProducts" style="width:250px;"></select>
    </div>
    <div style="padding-top: 50px;">
        <hr />
        <div>
            <div class="selection-panel">
                <table>
                    <tr>
                        <th>Test</th>
                    </tr>
                    <tr>
                        <td>
                            <select size="4" name="listBoxTerminalType" id="listBoxTerminalType" class="list-box"></select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="selection-panel">
                <table>
                    <tr>
                        <th>Test</th>
                    </tr>
                    <tr>
                        <td>
                            <select size="4" name="listBoxVoltageAndSuitableLamp" id="listBoxVoltageAndSuitableLamp" class="list-box"></select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <hr />
    </div>
    <div id="divButtons" style="text-align: center;">
        <input type="submit" name="btnResetSelections" value="Reset Selections" id="btnResetSelections" />
        <input type="submit" name="btnApplyFilter" value="Apply Filter" id="btnApplyFilter" />
    </div>
</form>

and css:

.list-box {
    width: 250px;
}
.selection-panel {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    align-content: center;
    text-align: center;
}
#divButtons {
    float:right;
    clear:both;
}

Upvotes: 0

Andrei V
Andrei V

Reputation: 7496

You just need to tell the browser to ignore the floating set by the the div surrounding the table:

#divButtons{
    clear:both;
}

#divButtons input[type="submit"]{
    float:right;
}

Please note that this solution "inverses" the order in which your buttons are displayed. You might need to change their position in your HTML.

Upvotes: 2

user2099810
user2099810

Reputation: 381

Or something like this

#divButtons{ width:100%; float:left }

http://jsfiddle.net/9BBKp/

Upvotes: 0

Related Questions