Css - How to avoid an element changing its size and position?

Feuergeist
January 9, 2024
231 views
0 votes
2 Answers

I have three paragraphs elements. The three divided in three sections. I don’t want none of them changing size or position. But I can’t accomplish that. Maybe with flex can it be done. CSS is really hard to me, and someone told that is pretty common that.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Libre y Singular</title>
    <link rel="stylesheet" type="text/css" href="css5/style4.css">
    <style type="text/css">
    body{
        resize: none;
        overflow: scroll;
    }
    </style>
</head>
<body>
    <h1>Libre y Singular</h1>
    <div>
    <section class="bilbo">
        <p>Hace muchos años me topé con algo realmente novedoso para mí, algo que podría haber conocido cuando sólo tenía 6 años y que a esa edad hubiera podido sacarle un enorme provecho gracias a las CR Tronic 360 de la empresa de mi padre, Typographics. Este algo con el que me crucé fue el Software Libre. Me resultó algo maravilloso, era mi primer contacto con el Software. Esto es algo raro, nunca conocí en toda mi vida el software privativo. Durante muchísimos años tuve una Commodore Amiga 500, máquina con la conocí qué era un sistema operativo. La primera vez que usé el diskette que lo levantaba me quedé maravillado, cuando descubrí que podía jugar con un sintetizador de voz con el que podía simular una computadora que hablara por si misma algo similar ocurrió. Pero no, no conocí el software privativo con la Amiga, existía en ese momento el AmigaBasic y yo ni noticia.</p>

        <p>Hoy en día podría ser uno de los mejores programadores del mundo si hubiese conocido el software libre o el privativo en conjunto con las CR Tronic 360 de Typographics. En realidad, me equivoqué más arriba al decir que era la empresa de mi padre. Era la empresa de muchos hombres, muchos empleados. Los conocía a todos, pues yo iba a la empresa a verlo a él. Con algunos de ellos tenía más simpatía que otros, a los dos que más recuerdo son a Mítolo, "el pitufo"; a Umberto; a Eduardo Barone; a Sergio, "la gallina". Ellos hacían la empresa, más allá de sus fundadores y dueños.</p>
    </section>
    <section class="bilbo">

        <p>No recuerdo haber nunca haber interactuado con las máquinas, sólo recuerdo verlas en una oficina, eran inmensas. En la casa de mi madre tenía robots, o por lo menos uno. No conocía aún la relación entre ellos y las CR Tronic 360. Nadie me hablaba de software.</p>

        <p>Entonces, tratando de ir un poco al grano, qué es lo libre y singular. Es algo que pensé en oposición a la singularidad. Vendría a ser la singularidad libre. Con esto entiendo un tipo de tecnología, que podría ser interpretada como inteligencia artificial, si es que tal cosa existe, construida con software libre. Para mí todo empieza con un debate, y si muchos hablan acerca del peligro de la singularidad y la inteligencia artificial es siempre mejor empezar con esta instancia.</p>
    </section>
    <section class="bilbo">
        <p>Hace mucho años registré por primera vez el dominio Free-Singularity.org, empezó siendo un debate y un juego. Creé una cadena pequeña de páginas web conectadas con hipervínculos binarios. ¿Qué quiere decir esto? Mejor ver el ejemplo, me cuesta encontrar las palabras. Esa cadena llegaba a una canción sobre el número pi en un sitio web de video streaming. Ahora sé un poco más de diseño web y puedo apostar a captar tráfico, hacer crecer en serio este lugar.</p>

        <p>La cuestión es que mientras sigue mi debate, ya surgió lo que algunos consideran inteligencia artificial. Me estoy quedando en el tiempo. Por el momento mi apuesta es no usarla, estudiarla, pero sin tocarla, escuchar lo que dicen mis amigos, mis compañeros en la facultad, los profesores, mi familia y ese etcétera mimado por Umberto Eco.</p>
    </section>
    </div>
    <section id="frodo">
        <nav class="links">
            <a href="https://free-singularity.org/typographics.html"><button id="penguin">Typograhics</button></a>
            <a href="https://free-singularity.org/CR_Tronic_360.html"><button id="penguin">CR Tronic 360</button></a>
            <a href="https://free-singularity.org/Amiga500.html"><button id="penguin">Commodore Amiga 500</button></a>
        </nav>
    </section>
</body>
</html>
    
   body{
    background-color: rgb(238, 206, 236);
}
h1{
    text-align: center;
    background-color: rgb(250, 159, 250);
    color: purple;
    border-style: solid;
}

div{
    display: inline-block;
    float: center;
    margin-left: 20px;
    margin-right: 20px;
    resize: none;
    overflow: auto;
}
.bilbo{
    background-color: rgb(238, 206, 236);
    color: black;
    padding: 10px;
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-radius: ;
    border-color: green;
    width: 28%;
    height: 425px;
    display: inline-block;
    float:left;
    overflow: scroll;
    margin: 1%;

}

#frodo{
    margin-left: 29%;
    margin-bottom: 50px;
}


button{
        vertical-align: top;
        height: 70px;
        width: 150px;
        background-color: #AAAAAA;
        border: .5px solid crimson;
        border-radius: 10px;
        padding: 20px;
        margin: 10px;
        text-decoration: none;
      }

#penguin {
    color: white;
    border-radius: 25%;
    transition-property: border-radius,border,color,background-color;
    transition-duration: .1s;
    transition-timing-function: .1s;
    transition-delay: .3s;
    margin: 10px;
}

#penguin:hover {
    border-color: orange;
    color: white;
    background-color: black;
}

I had change the code, sorry about that, but I need it to.
Now I have post the complete code of the website. Hope you can help me on this.

Here you can watch the problem online click here

Tags: css

Answers

Here you go. Flexbox on the body (or the parent of the section elements whatever that is) can do this.

Just ensure the section elements have flex: 0 0 auto;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
}

section {
  margin-left: 20px;
  margin-right: 20px;
  overflow: auto;
  flex: 0 0 auto;
}

.bilbo {
  background-color: rgb(238, 206, 236);
  color: black;
  padding: 10px;
  border-style: solid;
  border-width: 0px 5px 0px 5px;
  border-color: green;
  width: 150px;
  height: 425px;
  overflow: scroll;
  margin: 1em;
}

<section class="bilbo">
  <p>Hace muchos años me topé con algo realmente novedoso para mí, algo que podría haber conocido cuando sólo tenía 6 años y que a esa edad hubiera podido sacarle un enorme provecho gracias a las CR Tronic 360 de la empresa de mi padre, Typographics. Este
    algo con el que me crucé fue el Software Libre. Me resultó algo maravilloso, era mi primer contacto con el Software. Esto es algo raro, nunca conocí en toda mi vida el software privativo. Durante muchísimos años tuve una Commodore Amiga 500, máquina
    con la conocí qué era un sistema operativo. La primera vez que usé el diskette que lo levantaba me quedé maravillado, cuando descubrí que podía jugar con un sintetizador de voz con el que podía simular una computadora que hablara por si misma algo
    similar ocurrió. Pero no, no conocí el software privativo con la Amiga, existía en ese momento el AmigaBasic y yo ni noticia.</p>

  <p>Hoy en día podría ser uno de los mejores programadores del mundo si hubiese conocido el software libre o el privativo en conjunto con las CR Tronic 360 de Typographics. En realidad, me equivoqué más arriba al decir que era la empresa de mi padre. Era
    la empresa de muchos hombres, muchos empleados. Los conocía a todos, pues yo iba a la empresa a verlo a él. Con algunos de ellos tenía más simpatía que otros, a los dos que más recuerdo son a Mítolo, "el pitufo"; a Umberto; a Eduardo Barone; a Sergio,
    "la gallina". Ellos hacían la empresa, más allá de sus fundadores y dueños.</p>
</section>
<section class="bilbo">

  <p>No recuerdo haber nunca haber interactuado con las máquinas, sólo recuerdo verlas en una oficina, eran inmensas. En la casa de mi madre tenía robots, o por lo menos uno. No conocía aún la relación entre ellos y las CR Tronic 360. Nadie me hablaba de
    software.</p>

  <p>Entonces, tratando de ir un poco al grano, qué es lo libre y singular. Es algo que pensé en oposición a la singularidad. Vendría a ser la singularidad libre. Con esto entiendo un tipo de tecnología, que podría ser interpretada como inteligencia artificial,
    si es que tal cosa existe, construida con software libre. Para mí todo empieza con un debate, y si muchos hablan acerca del peligro de la singularidad y la inteligencia artificial es siempre mejor empezar con esta instancia.</p>
</section>
<section class="bilbo">
  <p>Hace mucho años registré por primera vez el dominio Free-Singularity.org, empezó siendo un debate y un juego. Creé una cadena pequeña de páginas web conectadas con hipervínculos binarios. ¿Qué quiere decir esto? Mejor ver el ejemplo, me cuesta encontrar
    las palabras. Esa cadena llegaba a una canción sobre el número pi en un sitio web de video streaming. Ahora sé un poco más de diseño web y puedo apostar a captar tráfico, hacer crecer en serio este lugar.</p>

  <p>La cuestión es que mientras sigue mi debate, ya surgió lo que algunos consideran inteligencia artificial. Me estoy quedando en el tiempo. Por el momento mi apuesta es no usarla, estudiarla, pero sin tocarla, escuchar lo que dicen mis amigos, mis compañeros
    en la facultad, los profesores, mi familia y ese etcétera mimado por Umberto Eco.</p>
</section>
</div>

You need to do the following:

Use grid on the parent element of the three boxes.
Remove float and width from the .bilbo.

So, I’ve made the following changes to the CSS:

.bilbo {
    /* width: 28%; */
    /* float: left; */
}

/* Added */
.parent {
    display: grid; /* Use grid */
    grid-template-columns: repeat(3, 1fr); /* Create three equal-width columns */
    gap: 20px; /* Add some gap between the columns */
}

See the snippet below.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Libre y Singular</title>
  <link rel="stylesheet" type="text/css" href="css5/style4.css">
  <style type="text/css">
    body {
      resize: none;
      overflow: scroll;
      background-color: rgb(238, 206, 236);
    }
    
    h1 {
      text-align: center;
      background-color: rgb(250, 159, 250);
      color: purple;
      border-style: solid;
    }
    
    div {
      display: inline-block;
      float: center;
      margin-left: 20px;
      margin-right: 20px;
      resize: none;
      overflow: auto;
    }
    
    .bilbo {
      background-color: rgb(238, 206, 236);
      color: black;
      padding: 10px;
      border-style: solid;
      border-width: 0px 5px 0px 5px;
      border-radius: ;
      border-color: green;
      /* width: 28%; */
      height: 425px;
      display: inline-block;
      /* float: left; */
      overflow: scroll;
      margin: 1%;
    }
    
    #frodo {
      margin-left: 29%;
      margin-bottom: 50px;
    }
    
    button {
      vertical-align: top;
      height: 70px;
      width: 150px;
      background-color: #AAAAAA;
      border: .5px solid crimson;
      border-radius: 10px;
      padding: 20px;
      margin: 10px;
      text-decoration: none;
    }
    
    #penguin {
      color: white;
      border-radius: 25%;
      transition-property: border-radius, border, color, background-color;
      transition-duration: .1s;
      transition-timing-function: .1s;
      transition-delay: .3s;
      margin: 10px;
    }
    
    #penguin:hover {
      border-color: orange;
      color: white;
      background-color: black;
    }
    
    .parent {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  </style>
</head>

<body>
  <h1>Libre y Singular</h1>
  <div class="parent">
    <section class="bilbo">
      <p>Hace muchos años me topé con algo realmente novedoso para mí, algo que podría haber conocido cuando sólo tenía 6 años y que a esa edad hubiera podido sacarle un enorme provecho gracias a las CR Tronic 360 de la empresa de mi padre, Typographics.
        Este algo con el que me crucé fue el Software Libre. Me resultó algo maravilloso, era mi primer contacto con el Software. Esto es algo raro, nunca conocí en toda mi vida el software privativo. Durante muchísimos años tuve una Commodore Amiga 500,
        máquina con la conocí qué era un sistema operativo. La primera vez que usé el diskette que lo levantaba me quedé maravillado, cuando descubrí que podía jugar con un sintetizador de voz con el que podía simular una computadora que hablara por si
        misma algo similar ocurrió. Pero no, no conocí el software privativo con la Amiga, existía en ese momento el AmigaBasic y yo ni noticia.</p>

      <p>Hoy en día podría ser uno de los mejores programadores del mundo si hubiese conocido el software libre o el privativo en conjunto con las CR Tronic 360 de Typographics. En realidad, me equivoqué más arriba al decir que era la empresa de mi padre.
        Era la empresa de muchos hombres, muchos empleados. Los conocía a todos, pues yo iba a la empresa a verlo a él. Con algunos de ellos tenía más simpatía que otros, a los dos que más recuerdo son a Mítolo, "el pitufo"; a Umberto; a Eduardo Barone;
        a Sergio, "la gallina". Ellos hacían la empresa, más allá de sus fundadores y dueños.</p>
    </section>
    <section class="bilbo">

      <p>No recuerdo haber nunca haber interactuado con las máquinas, sólo recuerdo verlas en una oficina, eran inmensas. En la casa de mi madre tenía robots, o por lo menos uno. No conocía aún la relación entre ellos y las CR Tronic 360. Nadie me hablaba
        de software.</p>

      <p>Entonces, tratando de ir un poco al grano, qué es lo libre y singular. Es algo que pensé en oposición a la singularidad. Vendría a ser la singularidad libre. Con esto entiendo un tipo de tecnología, que podría ser interpretada como inteligencia
        artificial, si es que tal cosa existe, construida con software libre. Para mí todo empieza con un debate, y si muchos hablan acerca del peligro de la singularidad y la inteligencia artificial es siempre mejor empezar con esta instancia.</p>
    </section>
    <section class="bilbo">
      <p>Hace mucho años registré por primera vez el dominio Free-Singularity.org, empezó siendo un debate y un juego. Creé una cadena pequeña de páginas web conectadas con hipervínculos binarios. ¿Qué quiere decir esto? Mejor ver el ejemplo, me cuesta encontrar
        las palabras. Esa cadena llegaba a una canción sobre el número pi en un sitio web de video streaming. Ahora sé un poco más de diseño web y puedo apostar a captar tráfico, hacer crecer en serio este lugar.</p>

      <p>La cuestión es que mientras sigue mi debate, ya surgió lo que algunos consideran inteligencia artificial. Me estoy quedando en el tiempo. Por el momento mi apuesta es no usarla, estudiarla, pero sin tocarla, escuchar lo que dicen mis amigos, mis
        compañeros en la facultad, los profesores, mi familia y ese etcétera mimado por Umberto Eco.</p>
    </section>
  </div>
  <section id="frodo">
    <nav class="links">
      <a href="https://free-singularity.org/typographics.html"><button id="penguin">Typograhics</button></a>
      <a href="https://free-singularity.org/CR_Tronic_360.html"><button id="penguin">CR Tronic 360</button></a>
      <a href="https://free-singularity.org/Amiga500.html"><button id="penguin">Commodore Amiga 500</button></a>
    </nav>
  </section>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How to avoid an element changing its size and position?

Answers