Foros del Web » Creando para Internet » CSS »

Problema con posicion de divs dentro de div

Estas en el tema de Problema con posicion de divs dentro de div en el foro de CSS en Foros del Web. Buenas, llevo tiempo leyendo este foro, pero nunca me había registrado, así que saludos. A ver tengo un problema que creo que es simple, pero ...
  #1 (permalink)  
Antiguo 09/06/2011, 05:20
 
Fecha de Ingreso: junio-2011
Mensajes: 9
Antigüedad: 6 años, 4 meses
Puntos: 1
Problema con posicion de divs dentro de div

Buenas, llevo tiempo leyendo este foro, pero nunca me había registrado, así que saludos.

A ver tengo un problema que creo que es simple, pero no sé como solucionarlo...

Tengo dentro de un div, otros 2 div, uno con el menú y otro con el contenido (que será texto).

El problema viene cuando quiero poner los dos alineados horizontalmente, que no lo consigo.

La estructura que quiero es esta:



Y el código que tengo es este:

El html:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="style.css" type="text/css" rel="stylesheet">
        <title>Proyecto de prueba css</title>
    </head>
    <body>
        <div id="contenedor">
          <div id="botones">
            <ul>
              <li><a href="#">link 1</a></li>
              <li><a href="#">link 2</a></li>
              <li><a href="#">link 3</a></li>
            </ul>
          </div>
          <div id="contenido">
            <p>Contenido alineado a la derecha de los botones!!
            <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
            Fin del contenido </p>
          </div>  
        </div>
    </body>
</html>
el style.css:
Código:
#botones{
  position:relative;
  border: 1px solid black;
  width: 20%;
  margin: 2px;
  text-align:left;
}

#botones ul{
  list-style-type: none;
}

#contenido{
  border: 1px solid black;
  position:relative;
  width: 77%;
  text-align:left;
  left: 21%;
  top: -92px;
  text-align:left;
  padding: 5px;
}

#contenedor{
  color:red;
  border: 2px solid black;
  width: 780px;
  margin: 0 auto;
}
Pues bien así consigo alinearlos de manera horizontal, el problema es que me deja un espacio abajo, que no quiero que me deje.

PD.: Tanto el tamaño del contenido, como el tamaño del menú, no sé cual es, por lo que no puedo decir que el contenedor tenga un tamaño determinado, ni un tamaño mínimo.

Gracias por adelantado
  #2 (permalink)  
Antiguo 09/06/2011, 06:56
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 7 meses
Puntos: 192
Respuesta: Problema con posicion de divs dentro de div

Que posicionamiento más extraño estás utilizando :P ¿No sería MUCHO más fácil y efectivo con flotados?

Así: http://jsbin.com/ovefe5

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>Proyecto de prueba css</title>
  7.   /* limpiar el flotado */
  8.   .clearfix{zoom:1;}
  9.   .clearfix:after{
  10.     content:'.';
  11.     display:block;
  12.     clear:both;
  13.     height:0;
  14.     line-height:0;
  15.     visibility:hidden;
  16.   }
  17.  
  18.   /* flotar a la izquierda */
  19. #botones{
  20.   border: 1px solid black;
  21.   width: 20%;
  22.   margin:5px;
  23.   float:left;
  24. }
  25.  
  26. #botones ul{
  27.   list-style-type: none;
  28. }
  29.  
  30.   /* flotar a la derecha */
  31. #contenido{
  32.   border: 1px solid black;
  33.   width: 77%;
  34.   margin: 5px;
  35.   float:right;
  36. }
  37.  
  38. #contenedor{
  39.   color:red;
  40.   border: 2px solid black;
  41.   width: 780px;
  42.   margin: 0 auto;
  43. }
  44.         </style>
  45.     </head>
  46.     <body>
  47.         <div id="contenedor" class="clearfix">
  48.           <div id="botones">
  49.             <ul>
  50.               <li><a href="#">link 1</a></li>
  51.               <li><a href="#">link 2</a></li>
  52.               <li><a href="#">link 3</a></li>
  53.             </ul>
  54.           </div>
  55.           <div id="contenido">
  56.             <p>Contenido alineado a la derecha de los botones!!
  57.             <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
  58.             Fin del contenido </p>
  59.           </div>  
  60.         </div>
  61.     </body>
  62. </html>
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 09/06/2011, 07:19
 
Fecha de Ingreso: junio-2011
Mensajes: 9
Antigüedad: 6 años, 4 meses
Puntos: 1
Respuesta: Problema con posicion de divs dentro de div

Cita:
Iniciado por Naahuel Ver Mensaje
Que posicionamiento más extraño estás utilizando :P ¿No sería MUCHO más fácil y efectivo con flotados?

Así: [URL="http://jsbin.com/ovefe5"]http://jsbin.com/ovefe5[/URL]

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>Proyecto de prueba css</title>
  7.   /* limpiar el flotado */
  8.   .clearfix{zoom:1;}
  9.   .clearfix:after{
  10.     content:'.';
  11.     display:block;
  12.     clear:both;
  13.     height:0;
  14.     line-height:0;
  15.     visibility:hidden;
  16.   }
  17.  
  18.   /* flotar a la izquierda */
  19. #botones{
  20.   border: 1px solid black;
  21.   width: 20%;
  22.   margin:5px;
  23.   float:left;
  24. }
  25.  
  26. #botones ul{
  27.   list-style-type: none;
  28. }
  29.  
  30.   /* flotar a la derecha */
  31. #contenido{
  32.   border: 1px solid black;
  33.   width: 77%;
  34.   margin: 5px;
  35.   float:right;
  36. }
  37.  
  38. #contenedor{
  39.   color:red;
  40.   border: 2px solid black;
  41.   width: 780px;
  42.   margin: 0 auto;
  43. }
  44.         </style>
  45.     </head>
  46.     <body>
  47.         <div id="contenedor" class="clearfix">
  48.           <div id="botones">
  49.             <ul>
  50.               <li><a href="#">link 1</a></li>
  51.               <li><a href="#">link 2</a></li>
  52.               <li><a href="#">link 3</a></li>
  53.             </ul>
  54.           </div>
  55.           <div id="contenido">
  56.             <p>Contenido alineado a la derecha de los botones!!
  57.             <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
  58.             Fin del contenido </p>
  59.           </div>  
  60.         </div>
  61.     </body>
  62. </html>
Gracias, lo intenté así, pero como lo probaba en firefox, en firefox se ve mal uno encima de otro, alguna sugerencia para que se vea bien en firefox??
  #4 (permalink)  
Antiguo 09/06/2011, 07:32
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 7 meses
Puntos: 192
Respuesta: Problema con posicion de divs dentro de div

Bueno eso es por los márgenes. Tenés que hacer bien los números. Tratá de usar dimensiones fijas y no porcentajes y tené en cuenta el ancho de los bordes.

<--margen--borde--padding-----contenido----padding--borde--margen--->

La suma de todos esos valores para cada caja debe dar el total del ancho del contenedor general.

Espero sea claro.
__________________
nahueljose.com.ar
  #5 (permalink)  
Antiguo 09/06/2011, 09:00
 
Fecha de Ingreso: junio-2011
Mensajes: 9
Antigüedad: 6 años, 4 meses
Puntos: 1
Respuesta: Problema con posicion de divs dentro de div

Gracias, todo solucionado, ya me había dado cuenta del problema, pero se me olvidó el contestar.
Un saludo

Etiquetas: divs, posicion
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 01:13.