Novato: Si no escribo no se ve el div

yosoloyo · #1 (**permalink**) 01/10/2012, 05:40

Buenas
Pues tenia una web toda llenas de tablas que he decidido ya por fin "modernizar" y pasar a css y por tanto usar div con posicionamiento en vez de tablas.

Como buen novato que soy, aun me lio un poco y hay cosas que no entiendo o que me sorprenden en demasía cuando seguramente sean tonterías de novato.

Si bien en algunos sitios he logrado que un div sin contenido alguno, se vea y muestre su ancho, pero hay ocasiones en que sin contenido no muestran ancho alguno.

Dejo un ejemplo sencillo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./estiloejemplo.css" type="text/css" media="screen" />
<title>Ejemplo</title>
</head>
 
<body>
<div class="ejemp1">
 
</div>
 
</body>
</html>

y su css que solo tiene esto de momento para el ejemplo

Código CSS:

Ver original.ejemp1
{
    width:100%;
    min-width:100%;
    background-color: #FC0;
    padding:0;
    margin:0;
}

Si en ese div con la clase ejemp1 no escribo nada, el div no coge el 100% del ancho, sin embargo, si escribo cualquier caracter si que coge automaticamente el 100% como es mi intención.

El uso que le quiero dar es el siguiente:

Tener un div principal con ancho 100% y luego dentro 3 divs aninados y con float left en el que el primero tenga ancho 50% y los otros dos ancho 25%. Mi intención es que el de ancho 50% no contenga nada, y los otros dos divs si. Pero claro segun el "error" (por decirlo de alguna manera), es que si no escribo nada dentro del div, no aparece y por tanto los otros dos div que si tienen contenido se posicionan alineados en la izquierda en la parte que debería corresponder al primer div de 50%

Como veis duda de grandisimo novato

He leido manuales, he buscado por google pero ........ no se o no se buscar o no tengo ni idea

IsaBelM · #2 (**permalink**) 01/10/2012, 05:55

eso te ocurre por que no tiene height. el ancho es el 100%, pero como el largo es 0, no se muestra nada

emprear · #3 (**permalink**) 01/10/2012, 05:57

Al no haber contenido y no tener un height definido no se visualiza nada, es como si trabajases solo en una dimensión

.ejemp1
{
width:100%;
min-width:100%;
height: 20px;
background-color: #FC0;
padding:0;
margin:0;
}

Saludos

yosoloyo · #4 (**permalink**) 01/10/2012, 06:47

vale veis fallo de gran novato...... menuda tonteria
Gracias a ambos

yosoloyo · #5 (**permalink**) 04/10/2012, 04:23

Siguiendo lo mismo.............

Si tengo un div principal y dentro de él quiero que haya 2 divs mas que ocupen el 100% de ese primer div.
Como hago para que uno tenga por ejemplo un min-with del 50% del div principal y el otro se rellene automaticamente con el resto, es decir coja el otro 50% pero de forma automatica, dado que si por ejemplo el div que tiene un minimo de 50% llega por contenido al 60%, que el otro se autoajuste al 40%.
Ademas quisiera que los divs uno y dos que están dentro de principal se alineen a la derecha, es decir salgan pegados de derecha a izquierda (actualmente lo hago con float right, porque con text aling, lo que alinea es el texto dentro de div uno y dos y no los divs uno y dos a la derecha.

Código HTML:

Ver original<div class="principal">
  <div class="uno"
  </div>
  <div class="dos"
  </div>
</div>

Código CSS:

Ver original.principal
{
  with:100%;
heith:32px;
}
.uno
{
with:auto;
heith:32px;
float:left;
}
.dos
{
min-with:50%;
heith:32px;
float:left;
}

Lo que quiero por tanto es algo asi:

------------------------------------------------------------------
//--------------------------div1//-----------------------div2//

Gracias de nuevo