1

Tengo parte del siguiente código

#div_nav{
    width: 200px;
    height: 500px;
}

nav{
    width: 300px;
    height: 500px;
    margin: 10px auto 10px 10px;
    background-color: beige;
}

section{
    width: 600px;
    height: auto;
    background-color: blue;
    position: relative;

}
.child_sections{
    width: 100px;
    height: 300px;
    background-color: rgb(185, 174, 174);
}

article{
    width: 50px;
    height: 250px;
    background-color: brown;
}
<body>

    <header> Notices of the World</header>
    

    <div id = "div_nav">
        <nav>
            <a href="">First link</a>
        </nav>
    </div>
    
    <div>
        
        <section>

            <section class = "child_sections">

                <h2>Sports</h2>

                <article>
    
                    <h3>Title article</h3>
    
                </article>

                <article>

                    <h3>Title article</h3>

                </article>
            </section>
       </section>
</body>

Lo que quiero es que el div que contiene el nav quede a la izquierda de la página y el div que contiene el section en medio (a la derecha deseo poner otra cosa) pero no ocurre. Pareciera que el nav ocupara todo el espacio a lo ancho y no puedo poner nada más ahí y no sé por qué. Si pongo la posición de este como absoluta sí se sobreponen las cosas y es cuestión de moverlo con los atributos right - top y demás, pero no creo que esto sea lo correcto.

Algo así quisiera que se viera.

2
  • Te sugiero que leas mas sobre css, porque es un problemas sencillo de resolver solo que lleva tiempo.
    – Lilibeth
    el 23 sep. 2021 a las 22:32
  • Estoy pidiendo ayuda precisamente porque necesito una respuesta rápida :c Sé que se podría resolver entendiendo más a fondo cómo se comportan las cosas, pero no tengo el tiempo justo ahora. Igual gracias el 23 sep. 2021 a las 22:35

1 respuesta 1

2

Puedes usar flex o grid. Esta solución que te doy usa flex
Para el CSS:

@charset "utf-8";
header{
    font-size: 24px;
    text-align:center;
    margin-bottom: 32px;
    border:1px solid blue
}
/*Para meter los tres bloques lado_izq - centro -lado_dcho.*/
.contenedor{
    display: flex;
    justify-content: space-between;
    }

/*Lado izquierdo*/
#div_nav{
     flex-grow: 1;
     background-color: beige;
}
nav{
    margin:10px
}

/* parte central*/
section{
    flex-grow: 10;
    background-color: blue;
    position: relative;
}
.child_sections{
    width: 100%;
    background-color: rgb(185, 174, 174);
    height:auto;
}
.child_sections article{
    height: 250px;
    background-color: brown;
}


/*Parte derecha*/
.derecha{
    flex-grow:1;
    background-color:#008000a8;
}

Y para el html

<header> Notices of the World</header>
    
<div class="contenedor">
    <div id = "div_nav">
        <nav>
            <a href="">First link</a>
        </nav>
    </div>
           
    <section>
        <section class = "child_sections">
            <h2>Sports</h2>
            <article>
                <h3>Title article 1</h3>
            </article>
            <article>
                <h3>Title article 2</h3>
            </article>
        </section>
   </section>
<div class="derecha">
Parte derecha
</div>   
</div>

Puedes verlo funcionando en esta página

EDITO
Aquí te pongo la otra solución.
El CSS:

#div_nav{
    width: 20%;
    height: 600px;
    float:left;
    background-color: beige;
}

nav{
    width:  100%;
    height: 100%;
    margin: 10px auto 10px 10px;
}

.resto{
    width:  80%;
    height: 600px;
    background-color: blue;
    display:inline-block;
}
.child_sections{
    width:  80%;
    height: 100%;
    background-color: rgb(185, 174, 174);
    float:left;
}

article{
    width: 100%;
    height: 250px;
    background-color: brown;
}

.derecha{
     width:20%;
     height:100%;
     background-color: yellow;
     display:inline-block
}

Si comparas verás que las dimensiones están puestas en porcentajes, que sea el navegador el que calcule para adaptarlo a la pantalla.
Hay dos bloques uno al 20% float (vertical izquierdo) y otro al 80% (la zona resto), en este segundo bloque a su vez hay otros dos para la banda vertical derecha.
Dentro de la sección central se repite el esquema: float, seguido de un inline-block

Y el HTML

<header> Notices of the World</header>
<div id = "div_nav">
    <nav><a href="">First link</a></nav>
</div>

<section class="resto">
    <section class = "child_sections">
        <h2>Sports</h2>
        <article>
            <h3>Title article</h3>
        </article>
        <article>
            <h3>Title article</h3>
        </article>
    </section>
    <div class="derecha">
    parte derecha
    </div>
</section>

En el htl quito una etiqueta div y al section le pongo la clase resto, que contiene la parcentral y la parte derecha (la he puesto con div, puedes ponerle section)
Si quieres puedes verlo en este ejemplo

3
  • Entiendo... Sin embargo, este es un componente que nunca había visto y no sé qué tan apropiado sea dar mi solución con algo que va más allá del curso que estoy tomando. Arriba me indicaron que era por no saber algo de CSS, ¿podrías decirme qué no estoy teniendo en cuenta con ese div, por favor? Igualmente, gracias por la respuesta el 23 sep. 2021 a las 22:58
  • 1
    Se puede hacer sin flex, o grid, pero veo que estás empezando. Hay otras formas de hacerlo: una es usar tablas, esa solución se usaba bastante hasta HTML4. L aotra manera es usar float, esto rompe el flujo natural y el contenido siguiente queda rodeando al bloque. También es necesario en este ejemplo convertir los bloques en bloques-inline: los bloques meten saltos de linea, los inlne no lo hacen , siguen el flujao natural del texto. Edito la respuesta para meter esta otra solución.
    – Juan
    el 24 sep. 2021 a las 10:21
  • Sí, muchas gracias. La solución con float es, al parecer, lo correcto para este nivel. Igualmente, las otras soluciones parecen mejor, intentaré averiguar más sobre el tema c: el 24 sep. 2021 a las 16:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.