CODEWITHSUNDEEP
htmlcss
Digital fortress
Digital fortress

Reputation: 737

Fix div position no matter the screen resolution is

This is my page header, it has a select menu and has to be positioned well on top of the background image, how do I fix it in position when screen resolution changes ?

Take a look

enter image description here

here on a bigger resolution

enter image description here

the html looks as follows:

    <div class="header">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td style="padding: 16px 10px 0 52px ;text-align: right; width: 230px; background: url('images/searchbar_dropdown.png') no-repeat scroll 72px 15px transparent;">
                       <select id="dept" name="dept" type="text" style="background-color: white; border: 2px solid rgb(182, 109, 49); width: 150px; height: 35px; opacity: 0;"><option></option>                                    
</select></div></td>
                        <td rowspan="2" style="width: 2px;">&nbsp;</td>

                    </tr>

            </table>
         </div>

and the header CSS

 .header {
background: url("../../images/background.png") repeat;
position: fixed;
color: white;
min-height: 65px;
padding: 5px 5px;
margin: 0;
}

Upvotes: 0

Views: 12319

Answers (3)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

Try this code

<div class="header">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td style="padding: 16px 10px 0px 52px; text-align: right; width: 230px; background: none repeat scroll 0% 0% whitesmoke; position: relative;">
                       <select style="border: 2px solid rgb(182, 109, 49); height: 35px; background: none repeat scroll 0% 0% yellow; opacity: 1; position: absolute; width: 150px; left: 0px;" type="text" name="dept" id="dept"><option></option>                                    
</select></td>
                        <td style="width: 2px;" rowspan="2">&nbsp;</td>

                    </tr>

            </tbody></table>
         </div>

Upvotes: 0

ScottS
ScottS

Reputation: 72261

I believe it is likely a combination of your width: 100% on the table and your text-align: right on your td. I suspect your td is not acting as you want, and not keeping its width: 230px, but is expanding with the screen width along with the table. With the text-align: right the select element is then moving also. The easiest fix would be to position the select such that it is text-align: left, unless you intend it to be right and the background to follow (in which case how you have the background attached is what you need to correct).

Upvotes: 0

user1130272
user1130272

Reputation:

The select is flowing out for you because the fixed position

You will need a wrapper around the box with a position relative and the box as position absolute

Example:

<div id="boxWrapper">
    <select class="selectbox">
        <option value="">option 1</option>
        <option value="">option 2</option>
        <option value="">option 3</option>
    </select>
</div>

#boxWrapper {
    position: relative:
}

.selectbox {
    position: absolute;
    top: 0px; 
    left: 0px;
}

Upvotes: 4

Related Questions