Problema con posicion de divs dentro de div

sinpresente · #1 (**permalink**) 09/06/2011, 05:20

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

Naahuel · #2 (**permalink**) 09/06/2011, 06:56

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<!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" />
        <title>Proyecto de prueba css</title>
<style>
  /* limpiar el flotado */
  .clearfix{zoom:1;} 
  .clearfix:after{
    content:'.';
    display:block;
    clear:both;
    height:0;
    line-height:0;
    visibility:hidden;
  }
 
  /* flotar a la izquierda */
#botones{
  border: 1px solid black;
  width: 20%;
  margin:5px;
  float:left;
}
 
#botones ul{
  list-style-type: none;
}
 
  /* flotar a la derecha */
#contenido{
  border: 1px solid black;
  width: 77%;
  margin: 5px;
  float:right;
}
 
#contenedor{
  color:red;
  border: 2px solid black;
  width: 780px;
  margin: 0 auto;
}
        </style>
    </head>
    <body>
        <div id="contenedor" class="clearfix">
          <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>

sinpresente · #3 (**permalink**) 09/06/2011, 07:19

Cita:

Iniciado por Naahuel

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<!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" />
        <title>Proyecto de prueba css</title>
<style>
  /* limpiar el flotado */
  .clearfix{zoom:1;} 
  .clearfix:after{
    content:'.';
    display:block;
    clear:both;
    height:0;
    line-height:0;
    visibility:hidden;
  }
 
  /* flotar a la izquierda */
#botones{
  border: 1px solid black;
  width: 20%;
  margin:5px;
  float:left;
}
 
#botones ul{
  list-style-type: none;
}
 
  /* flotar a la derecha */
#contenido{
  border: 1px solid black;
  width: 77%;
  margin: 5px;
  float:right;
}
 
#contenedor{
  color:red;
  border: 2px solid black;
  width: 780px;
  margin: 0 auto;
}
        </style>
    </head>
    <body>
        <div id="contenedor" class="clearfix">
          <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>

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??

Naahuel · #4 (**permalink**) 09/06/2011, 07:32

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.

sinpresente · #5 (**permalink**) 09/06/2011, 09:00

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