Comunidad de diseño web y desarrollo en internet online

display:inline

Citar            
MensajeEscrito el 17 Mar 2011 12:41 am
Hola, tengo el siguiente problema, quiero alinear dos divs en un mismo renglon pero para no usar float:left estoy usando display:inline, pero aún así no lo hace, pongo mi código debajo, alguien sabe qué estoy haciendo mal? saludos y de antemano gracias

Código HTML :

<html>
<head>
<style type="text/css">
#menu_izq, #cont_derecha{   
   display:inline;
}

#menu_izq{
   width:233px;
   border:1px solid #0C0;
   
}

#cont_derecha{
   width:50px;
   height:320px;
   border:1px solid #C00;
   background-color:#F5F6F8;
   
}
</style>
</head>
<body>
    <div id="body_centro">
       <div id="menu_izq">
           <div id="novedades">
               <h2>NOVEDADES</h2>
                
                <div class="sub_menu_izq">
                    <ul>
                       <li>COMPRA POR CARGA</li>                        
                    </ul>
                </div>                
            </div>
        </div>
        
        <div id="cont_derecha">
        hjhjhj
        </div>
        
    </div>

</body>
</html>

Por sirhcle

94 de clabLevel

1 tutorial

Genero:Masculino  

desarrollador web

firefox
Citar            
MensajeEscrito el 18 Mar 2011 05:04 pm
El problema es que dentro de un tag con display: inline tienes al menos uno (de hecho en tu código tienes más de uno) que tiene display: block y ese es el que causa que el ancho se dispare para ocupar toda la ventana y por tanto hace "salto de línea" en el siguiente tag con display: inline.

Para que el div no se estire al 100% no basta con poner display: inline, también debe contener tags que no sean block.

Pero tu problema se resolvería fácilmente si haces lo siguiente:

Código HTML :

#menu_izq, #cont_derecha{    
   display: table-cell; 
} 


Y listo. Ahora tienes un "block" que se comporta como un "inline" :)

Otra cosa, cuando a un tag le pones display: inline, el width es irrelevante.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 18 Mar 2011 06:59 pm

DriverOp escribió:

El problema es que dentro de un tag con display: inline tienes al menos uno (de hecho en tu código tienes más de uno) que tiene display: block y ese es el que causa que el ancho se dispare para ocupar toda la ventana y por tanto hace "salto de línea" en el siguiente tag con display: inline.

Para que el div no se estire al 100% no basta con poner display: inline, también debe contener tags que no sean block.

Pero tu problema se resolvería fácilmente si haces lo siguiente:

Código HTML :

#menu_izq, #cont_derecha{    
   display: table-cell; 
} 


Y listo. Ahora tienes un "block" que se comporta como un "inline" :)

Otra cosa, cuando a un tag le pones display: inline, el width es irrelevante.
Muchas gracias DriverOp, lo solucione de otra manerá pero aún así checaré tu solución, pues estoy seguro que no será la primera vez que se me presenté el mismo problema
saludos y de nuevo gracias :)

Por sirhcle

94 de clabLevel

1 tutorial

Genero:Masculino  

desarrollador web

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.