I cannot lay out side by side the css elements on the screen using col-

Asked

Viewed 100 times

2

I want the two Divs with the gradient to line up Follows HTML and CSS:

* {
  box-sizing: border-box;
}

/* Sistema de colunas para celulares: */
[class*="col-"] {
    width: 100%;

  }


  /* Sistema de colunas para tablets: */
@media only screen and (min-width: 600px) {
    
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

  }
  

  /* Sistema de colunas para computadores: */
@media only screen and (min-width: 768px) {
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

  }

  /***********************************************/

  html {
    font-family: "Lucida Sans", sans-serif;
  }
  

   /* Imagens diferentes para tamanhos de páginas diferentes: */
/*body {
    background-image: url('');
  }
  
  /* Para quando a página for maior que 400px: */
  /*@media only screen and (min-width: 400px) {
    body {
      background-image: url('');
    }
  } */


  .fotoPessoal {

    background-size: contain;
    background-repeat: no-repeat;
    max-width: 100%;
    height: 100%;
    width: auto;
    background-image: url('../theimages/selfie.jpg');


  }

  .painelEsquerdo {

    width: 100%;
    height: 180vh;
    background:
      linear-gradient(65deg, rgba(0, 0, 0, 0.8), rgba(190, 190, 190, 1));

  }

  .painelDireito {

    width:100%;
    height:100vh;
    background:
      linear-gradient(-245deg, rgba(190, 190, 190, 1), rgba(0, 0, 0, 0.8));

  }

  .caixa1 {

    width: 100%;
    height: 100%;

  }
<html>

    <head>

        <meta charset="UTF-8">
        

        <link rel="stylesheet" href="thecss/thecascade.css">

        
    </head>



    <body>

        
        <div class="caixa1">
            <div class="col-3">

                <div class="painelEsquerdo">

                    <div class="fotoPessoal">

                    </div>

                </div>


            </div>

            <div class="col-9">

                <div class="painelDireito">



                </div>

            </div>

        </div>
        


    </body>


</html>

html css front-end div

  • in the case in two columns ne?

  • That :) Thank you

1 answer

2


Giovani for you to work with this formatting you want to use CSS3 property: flexbox.

Change your class .caixa1 adding this: display:flex; being like this:

.caixa1 {

    width: 100%;
    height: 100%;
    display:flex;

  }

Read on here about flexbox.

Browser other questions tagged html css front-end div

You are not signed in. Login or sign up in order to post.