La opción de selección no se muestra correctamente

Estoy tratando de crear una página web HTML donde en la parte superior hay algunas opciones de menú y luego en un cuadro quiero mostrar algunos elementos de la lista. He usado el siguiente código para lograr lo mismo:

<body>
<div id="admin">
<div id="header">
<span id="show_all" onclick="showAll();" class="nolite">All</span>
<span id="show_words" onclick="showWords();" class="nolite">Blocked Words</span>
<span id="show_ip" onclick="showIP();" class="nolite">Blocked IP</span>
<span id="show_url" onclick="showURL();" class="nolite">Blocked URL</span>
<span id="show_filtered" onclick="showFiltered();" class="nolite">Authorized System</span>
</div>
</div>
<div>
<table width="auto" border="1" cellspacing="0" cellpadding="0" >
<td nowrap>
<select name="selectFilter" id="selectFilter" size="23">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</td>
</table>
</div>
</body>

A través de una llamada AJAX, estoy actualizando el valor de las opciones de selectFilter con éxito. Pero el problema es que el cuadro de selección se encuentra en el lado izquierdo de las opciones del menú y no se expande mucho para cubrir la ventana del navegador. He adjuntado cómo se ve la página de resultados:Página de resultados

¿Cómo puedo hacer que la opción de selección se muestre debajo de mi opción de menú y cubra la ventana del navegador con márgenes a la izquierda desde abajo, arriba (después de la parte superior del menú), izquierda y derecha?

A continuación se muestra el CSS que estoy usando:

#icon {
  position: absolute;
  left: 50px;
  top: 50px;
}

#content {
  position: absolute;
  left: 230px;
  top: 70px;
  width: 400px;
}

#ok_btn {
  position: absolute;
  left: 20px;
  cursor: pointer;
}

#cancel_btn {
  position: absolute;
  left: 150px;
  cursor: pointer;
}

#header {
  position: absolute;
  left: 50px;
  top: 20px;
}

#show_all, #show_words, #show_ip, #show_url, #show_filtered {
  cursor: pointer;
}

.button {
  cursor: pointer;
}

.hilite {
  background: #f88017;
  color: #ffffff;
  padding: 5px;
}

.nolite {
  background: #ffffff;
  color: #000000;
  padding: 5px;
}

.denied {
  text-decoration: line-through;
}

#table {
  position: absolute;
  left: 50px;
  top: 60px;
  right: 50px;
  bottom: 10px;
  overflow: auto;
  border: 1px solid black;
}

.row {
  padding: 2px;
}

preguntado el 02 de diciembre de 13 a las 08:12

Parece un problema de estilo que necesita para publicar sus hojas de estilo también:

He agregado mi hoja de estilo en la pregunta:

1 Respuestas

No estoy seguro acerca de sus hojas de estilo, pero agregar esto hará que cubra el navegador con márgenes.

table { width:96%;margin:1% ;}
select {width:100%}

Respondido el 02 de diciembre de 13 a las 08:12

He agregado mi hoja de estilo en la pregunta. Traté de hacer uso de sus comentarios en mi hoja de estilo, pero sigo teniendo el mismo problema: Programador

Gracias por la pista: con la manipulación de mi CSS pude lograr el objetivo. Programador

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.