Como acomodar una div..

Hola a todos, me da un poco de pena preguntar, pero resulta que estoy trabajando a full. tengo el siguiente problema.



como ven el contenedor (rozado) y los botones (tambien rozado) estan correctamente alineados. Pero a la hora de hacer una nueva capa para agregar contenido, me sale muy arriba (azul) y quiero que esté mas abajo (rojo).

Aclaro, los botones son una lista dentro de un <div> no les paso el código por que es un poco largo. Pero les paso el html.

Código :

<div id="contenido">
        <div id="botones">
         <ul id="navi">
             <li><a href="#"><span title="bla bla">Teor&iacute;a</span></a></li>
             <li><a href="#"><span title="ma bla bla">Guía de Ejercicios</span></a></li>
             <li><a href="#"><span title="y bla bla">Programas</span></a></li>
            </ul></div>
        <div id="botones2">
              <ul id="navi2">
              <li><a href="#"><span title="mi mi">Cronograma</span></a></li>
             <li><a href="#"><span title="Desgargar Guía de Laboratorio">Guía de Laboratorio</span></a></li>
              <li><a href="#"><span title="Descargar ficha personal del alumno">Ficha</span></a></li>
             <li><a href="#"><span title="Applet interactivo">Applet</span></a></li>
             </ul></div>
[color=red] <div id="parrafo que quiero acomodar"> texto dentro de parrafo</div>[/color]
  </div>

Agradezco cualquier ayuda.

Gracias de antemano

Puse los botones dentro de un div y lo hice del ancho del contenedor. Pero ahora ocurre esto:



El color de fondo es para que se vea el div que contiene los botones...

Cualquier ayuda me viene bien

al div de "botones" ponle un clear:both

y recuerda, para poder ayudarte mejor necesitamos tanto el código (css Y xhtml) como el link (de preferencia)

Código :

<div id="contenido">
        <div id="encabezado">Sepan disculpar, estamos trabajando en esta secci&oacute;n<a name="up"></a></div>
      <div style="height:20px;width:580px; "></div>
      <div style="width:580px;height:60px;background-color:#00CCCC;">
        <div id="botones">
    <ul id="navi">
  <li><a href="../qa_arch_matdid/teoria.htm"><span title="A&uacute;n no estan cargadas las teor&iacute;as">Teor&iacute;a</span></a></li>
  <li><a href="http://exa.unne.edu.ar/investigacion/labquiam/archcat/matdid/QAGuiaProblemas-06.zip"><span title="Descargar guía de ejercicios">Guía de Ejercicios</span></a></li>
  <li><a href="qa_arch_matdid/programa.htm"><span title="Ver o descargar progama anal&iacute;tico">Programas</span></a></li>
  </ul></div>
        <div id="botones2">
   <ul id="navi2">
  <li><a href="http://exa.unne.edu.ar/investigacion/labquiam/archcat/matdid/Cronograma_06.zip"><span title="Descargar Cronograma de Actividades">Cronograma</span></a></li>
  <li><a href="http://exa.unne.edu.ar/investigacion/labquiam/archcat/matdid/GuiaLab_06.zip"><span title="Desgargar Guía de Laboratorio">Guía de Laboratorio</span></a></li>
  <li><a href="http://exa.unne.edu.ar/investigacion/labquiam/archcat/matdid/Ficha.zip"><span title="Descargar ficha personal del alumno">Ficha</span></a></li>
  </ul></div></div>
        <div id="parrafo1"> 
          <p>Parraf&oacute; que va abajo y no ac&aacute; </p>
       </div>
<div class="textogrisizq" style="padding:20px;"><br>
   </div>[/quote]

Y el CSS

Código :

/* Parrafo es donde esta el texto abajo */
#parrafo1 {width:100px;margin-left:20px; height:250px;padding:0; background-color:#0066FF;}

¿ Para qué es clear:both?

Clear sirve para limpiar el float, y el both es para que se limpie en ambos lados. Puedes usar clear:left para que solo se limpie en la izquierda, o clear:right para la derecha.

sigo teniendo el mismo problema

Cuando pongo el clear me vuela todo...
a ver si me explico. El problema es ese espacio

intenta con esto

Código :

*{
margin:0;
padding:0;
}

Pues puedes intentar poner cada uno dentro de otro div pero que esno esten flotados ni nada por el stylo ya dentro de este pones lod iv y los acomodas a tu preferencia.



Pero a ultimas utiliza una tabla y dentro contriyes los div's


GersonM

GersonM_17 escribió:

Si, y que eso sea la ultima ultima ultima opción.

Le tienes pavor a las tablas.




Oye esos tres pelos se te ven bien the_OLD_JP

GersonM_17 escribió:

No es pavor. Es incorrecto usar tablas para maquetar diseños

Bueno esta bien yo aun no se muhco de CSS y aun sigo usando tablas


pero respecto al problema de Razzor pues te recomiendo separar los botones del contenido en div's pero que estos ocupen el 100% del div principal de ea manera no se montaria uno encima de otro.

aunque es mas codigo puede funcionar [/img]

crea otro selector:

#parrafo1 {
padding: 0px;
height: 0px;
width: 0px;
margin: 20px 0px;
}

avisa si te funcionó.

saludos