Foros del Web » Creando para Internet » CSS »

Como evitar que un div se expanda a su contenedor ¿?

Estas en el tema de Como evitar que un div se expanda a su contenedor ¿? en el foro de CSS en Foros del Web. Muy buenas a todos los foreros. Como otros, estoy "sufriendo" la conversión de tablas a divs y aunque he buscado y buscado no encuentro la ...
  #1 (permalink)  
Antiguo 15/07/2008, 02:45
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Como evitar que un div se expanda a su contenedor ¿?

Muy buenas a todos los foreros.

Como otros, estoy "sufriendo" la conversión de tablas a divs y aunque he buscado y buscado no encuentro la solución, me imagino que debe ser muy sencilla.. pero es que no doy con ella...

Se trata de lo siguiente:

Como diablos hago para que teniendo 2 divs (uno que contiene a otro), el del interior NO se expanda hasta ocupar el ancho o el alto de su contenedor.

El ejemplo es este:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>test</title>
<style type="text/css">

#cuerpoprincipal {
clear: left;
margin-left: 30px;
width: 800px;
}

#barra{
clear: left;
background-color: #0000ff;
height: 5px;
}


.noteexpandas {
clear: left;
background-color: #ff0000;
}

</style>
</head>
<body>
<div id="cuerpoprincipal">
<div id="barra"></div>
<div class="noteexpandas">Este div no quiero que se expanda, solamente si el texto lo necesita</div>
</div>
</body>
</html>
En el ejemplo, tengo un cuerpo principal de 800px a 30px de la izquierda, y quiero una barra superior que se expande correctamente.. pero el problema viene ahora. El siguiente cuerpo NO quiero que se expanda como la barra... al contrario, quiero que ocupe solo lo que vaya creciendo, como veis (al ponerle fondo rojo) se me expande al 100%...

Debe ser un problema típico.. pero es que soy muy tonto .. porque llevo ya 1 dia con el...

¿Tan malo eran las tablas?
  #2 (permalink)  
Antiguo 15/07/2008, 03:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como evitar que un div se expanda a su contenedor ¿?

Los divs o cajas tienen por defecto un display block, lo que significa que ocupan toda la línea del flujo de documento, es decir, el 100% de ancho.

Para lo que quieres, podría servirte añadirle la propiedad display: inline;, que hará que sólo ocupe lo que ocupe el texto que lleva dentro, pero que sea exactamente eso lo que buscas depende de qué quieras hacer con él.

Mikel.
  #3 (permalink)  
Antiguo 15/07/2008, 04:19
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Como evitar que un div se expanda a su contenedor ¿?

Cita:
Iniciado por Mikmoro Ver Mensaje
Los divs o cajas tienen por defecto un display block, lo que significa que ocupan toda la línea del flujo de documento, es decir, el 100% de ancho.

Para lo que quieres, podría servirte añadirle la propiedad display: inline;, que hará que sólo ocupe lo que ocupe el texto que lleva dentro, pero que sea exactamente eso lo que buscas depende de qué quieras hacer con él.

Mikel.

Gracias Mikel por la rápida respuesta

Sería así no?

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>test</title>
<style type="text/css">

#cuerpoprincipal {
clear: left;
margin-left: 30px;
width: 800px;
}

#barra{
clear: left;
background-color: #0000ff;
height: 5px;
}


.noteexpandas {
clear: left;
background-color: #ff0000;
display: inline;
}

</style>
</head>
<body>
<div id="cuerpoprincipal">
<div id="barra"></div>
<div class="noteexpandas">Este div no quiero que se expanda, solamente si el texto lo necesita</div>
</div>
</body>
</html>
Pero... no me funciona... .. que puedo estar haciendo mal? gracias!!
  #4 (permalink)  
Antiguo 15/07/2008, 04:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como evitar que un div se expanda a su contenedor ¿?

Exacto, así es. ¿Pero cómo que no te funciona? entonces debe ser que no te he entendido. Yo lo que veo es una franja azul que ocupa todo el ancho, y un texto con el fondo rojo que ocupa hasta la mitad de ancho de la franja azul más o menos. ¿No era eso lo que querías hacer?

Mikel.
  #5 (permalink)  
Antiguo 15/07/2008, 04:45
 
Fecha de Ingreso: julio-2008
Mensajes: 30
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Como evitar que un div se expanda a su contenedor ¿?

Cita:
Iniciado por Mikmoro Ver Mensaje
Exacto, así es. ¿Pero cómo que no te funciona? entonces debe ser que no te he entendido. Yo lo que veo es una franja azul que ocupa todo el ancho, y un texto con el fondo rojo que ocupa hasta la mitad de ancho de la franja azul más o menos. ¿No era eso lo que querías hacer?

Mikel.
Vaya!! si no te digo que soy mu tonto!!

Lo estaba escribiendo yo mal!!

Todo perfecto Mikel!!!!

Vaya!... muchas gracias! ;)

Tengo otra duda, pero mejor creo un nuevo post por que no tiene nada que ver con esto
  #6 (permalink)  
Antiguo 15/07/2008, 04:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como evitar que un div se expanda a su contenedor ¿?

Estaba casi seguro de haberlo entendido bien, pero quizá no era eso.

Me alegro de que lo hayas resuelto

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:35.