Jump to content

Recommended Posts

Olá pessoal sou novo no CSS e estou com um pequeno problema, deve ser fácil de resolver mas sou novato nessa área. Tenho uma div sidebar com float: rigth e width:300px fixo e tenho uma div responsivo com float:left e width:100%, o que eu preciso é que a div responsivo fique com 100% do lado da sidebar ocupando o máximo que puder, tipo como na imagem. Qual comando posso usar?

gfdg.jpg

Share this post


Link to post
Share on other sites

Simples:

div.responsivo {width: calc(100% - 300px)}

 

Ou seja fazemos o navegador calcular 100% de disponibilidade -300px que é o tamanho da outra div.

Obs.: Só use isso em casos extrema necessidade. Pois se houver certa quantidade de elementos recebendo essa propriedade pode causar lentidão da página.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By kaioneresm
      Olá boa tarde, alguem sabe um codigo javascript facil que sirva para abrir uma div como se fosse um pou-up no centro da tela e dentro dela conter um X para fechá-la? 
       
      obrigado!!
    • By luiz monteiro
      E aí pessoal!
      Minha questão de hoje é a seguinte, ao usar o display inline-block ou inline-flex ocorre um desalinhamento dos blocos. Tentei usar outro inline, porem sem sucesso.
      Para melhor visualizar o que quero dizer, anexo esta uma print do resultado indesejável.
      Preciso que os blocos fiquem alinhados, porem ao inserir duas divs  (2 e 3) no terceiro bloco ocorre o desalinhamento.
      Vou deixar o código para melhor entender.
       
      //==================HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <title></title>
          <link rel="stylesheet" type="text/css" href="./css/style.css">
      </head>
      <body>

          <div class="container">
              
              <div class="blocos">0</div>
              
              <div class="blocos">1</div>
              
              <div class="blocos">
                  <div class="linhas">2</div>
                  <div class="linhas">3</div>
              </div>
              
              <div class="blocos">4</div>
          </div>
       
      </body>
      </html>
       
       
      //================== CSS
      @charset "utf-8";
      *
      {
          margin: 0px;
          padding: 0px;
          list-style: none;
          resize: none;
          outline: none;
          text-decoration: none;
      }
      html, body
      {
          width: 100%;
          overflow-x: hidden;
          font-family: verdana;
          letter-spacing: 1.5555px;
          font-weight: normal;
      }
      .container
      {
          width: 100%;
          padding-left: 13px;
          background: #000;
      }
      .blocos
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          background: #888;
      }
      .linhas
      {
          background: #f60;
          width: 100%;
          height: 122px;
          margin-bottom: 2px;
      }
       
      Agradeço desde já.
       
       
       

    • By Alberto Nascimento
      Tenho este código abaixo que inseri em meu arquivo para que possa exibir por link a imagem que encontra-se hospedada em uma pasta no meu servidor, sendo que a mesma "pega" o nome do arquivo que foi salvo anteriormente no registro específico.
      echo sprintf('<a href="http://www.meusite.com.br/imagens/%s">', $rows_cursos['novonome']); echo "".$rows_cursos['novonome']."<br>"; Porém estou com um problema. As imagens que são exibidas em uma frame, porém por serem imagens em sua maioria enormes, elas ficam "gigantes na tela". Então, seria possível "redimensionar" a um valor expecífico em pixels ou então que seja redimensionado a um percentual ou de acordo com o frame ? Existe algum código que faça redimensionar as imagens?
    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
    • By higordiasz
      Boa Tarde,
      Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
       
      Segue meu código CSS responsável pelas div.
       
      .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
       
      <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
       

       
      Alguem sabe oq posso alterar para alinhar elas corretamente ? 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.