DIV y recolocación de componentes

MikiBroki · #1 (**permalink**) 01/02/2007, 05:03

Hola de nuevo,

El problema que tengo ahora es el siguiente: tengo un DIV y dentro de él otro con componentes. Al primero no le tengo definido ancho, con lo cual se adapta al ancho de la pantalla en cada momento, y al interior tampoco para que haga lo propio.

El caso es que al disminuir el ancho de la ventana, los componentes que están en el DIV interior se colocan unos encima de otros, y lo que quiero es que se oculten... se puede hacer esto sin tener que cambiar los anchos mediante javaScript, y sin definir un ancho mínimo para el DIV interior (aparte de que min-width no sirve en IE)?

Gracias

Código:

<html>
    <body style="overflow:hidden;margin:0">

        
        <div id="divContenedor" style="background-color:navy;height:90%;">    


            <div id="divContenido" style="height:35px;overflow:hidden;background-color:yellow;">
            
                <label for='lstOrganizacion_Entornos' class='etiqueta'>Entorno:</label>          
                <select id='lstOrganizacion_Entornos' class='combo' style='width:240px;'></select>     
                <label for='lstOrganizacion_Division' class='etiqueta'>Divisi&oacute;n:</label>
                <select id='lstOrganizacion_Division' class='combo' style='width:240px;'></select>
                <label for='lstOrganizacion_Orden'    class='etiqueta'>por:</label>
                <select id='lstOrganizacion_Orden'    class='combo' style='width:80px;'>
                    <option value='grupo'>Grupos</option>
                    <option value='grupohorario'>Horarios</option>
                    <option value='sector'>Sectores</option>
                </select>
                <input type='image' id='btnOrganizacion_Mostrar' src='imagenes/lupa.gif' style='padding-left:3px;vertical-align:middle;' />
            </div>
                
        </div>            

        <p/><input type=button value="click" onclick="document.getElementById('divContenedor').style.width='50%';" />
   
    </body>
    
</html>

Mikmoro · #2 (**permalink**) 01/02/2007, 05:30

Podrías poner el elemento <nobr>...</nobr> dentro de tu div (o fuera) y consigues ese efecto. No es standar html y por lo tanto no valida, pero te hace el apaño. No se me ocurre otra forma de hacerlo con css válido.

Código:

<nobr><div id="divContenido" style="height:35px;overflow:hidden;background-color:yellow;">
            
                <label for='lstOrganizacion_Entornos' class='etiqueta'>Entorno:</label>          
                <select id='lstOrganizacion_Entornos' class='combo' style='width:240px;'></select>     
                <label for='lstOrganizacion_Division' class='etiqueta'>Divisi&oacute;n:</label>
                <select id='lstOrganizacion_Division' class='combo' style='width:240px;'></select>
                <label for='lstOrganizacion_Orden'    class='etiqueta'>por:</label>
                <select id='lstOrganizacion_Orden'    class='combo' style='width:80px;'>
                    <option value='grupo'>Grupos</option>
                    <option value='grupohorario'>Horarios</option>
                    <option value='sector'>Sectores</option>
                </select>
                <input type='image' id='btnOrganizacion_Mostrar' src='imagenes/lupa.gif' style='padding-left:3px;vertical-align:middle;' />
            </div></nobr>

Mikel.

MikiBroki · #3 (**permalink**) 01/02/2007, 05:55

Perfecto muchas gracias de nuevo. De todos modos si alguien sabe cómo hacerlo de modo standard se lo agradecería

Mikmoro · #4 (**permalink**) 01/02/2007, 06:29

Ahora recuerdo que leí sobre que Microsoft se sacó de la manga el width:expression para simular el min-width.

Mira este enlace, que supongo que te servirá:

http://511.dabomb.com.ar/2006/01/max...ernet-explorer

Mikel.