Home/ Questions/Q 8305763
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:11:26+00:00

I have a page that looks like this: <body> <div class=pollid > <select class=pollid

  • 0

I have a page that looks like this:

<body>
<div class="pollid" >
<select class="pollid" id="pollid" size="[2]" >
 [options]
</select></div>
<div class="seperator"></div>
<div class="options">
<select class="options" id="options" disabled="disabled" size="2">
<option id="deadoption">Select a poll to enable this box.</option>
</select></div>
<div class="seperator"></div>
<div class="options2" id="options2">
</div>
</body>

I also have a bit of jquery that just does this when a specific option in the second div is selected:

$("#options2").load("ajax/newOption.html");

And newOption.html looks like this:

<input type="text" id="newopt" label="Option: " />
<button id="submit" type="button" value="Submit" />

The CSS I have looks like this:

select {
height: 100%;
width: 100%;
}

div.pollid  {
height: 100%;
width: 30%;
display: inline-block;
}

div.options {
height: 100%;
width: 30%;
display: inline-block;
}

div.options2 {
height: 100%;
width: 30%;
display: inline-block;
}

.seperator {
height: 100%;
width: 3%;
display: inline-block;
}

Now, this works. However, when I click the option that loads that page, the div jumps down so that the bottom of the input is at the bottom of my screen. This is not what I want. I want the div to stay where it is, taking up 30% of the screen. I don’t want the screen to scroll at all, which it does once the html is loaded. How might I be able to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found the solution after experimenting. It looks like, for some reason, putting anything in any of these divs other than the <select size="x>1"> makes it jump down, and giving them the property vertical-align:top fixes that.

    • 0