Ir ao conteúdo
  • Cadastre-se
Seja um moderador do Clube do Hardware!
Entre para seguir isso  
Seguidores 0
Fibonacci2012

[Resolvido] Problema em colocar uma div do lado da outra

Por , em Programação web

Recommended Posts

Fibonacci2012    0

Fibonacci2012
Postado

no meu site tem uma div com 960 pixels de largura. Dentro dela, eu quero colocar uma de 200 pixels à esquerda e outra de 760 pixels à direita. O problema, é que o computador está colocando uma div embaixo da outra. Mesmo se eu escrever float left na primeira e float right na segunda, elas continuam uma embaixo da outra. A única coisa que muda quando eu coloco os floats é que a de baixo fica à direita, mas continua embaixo. O que eu estou fazendo de errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

DiF    3.935

DiF
Postado

Ola,

Defina na div de 960px o display: table e nas duas divs filhas, defina como float left

Veja o exemplo em funcionamento: http://jsfiddle.net/n6M7F/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fibonacci2012
  • Autor do tópico
    •    0

    Fibonacci2012
    Postado

    Oi, eu fiz isso, mas elas continuam uma em cima da outra. Aqui está o arquivo html e o css:

    arquivo html:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Filmes / Séries</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="topo">
      </div>
      <div class="conteudo">
        <div class="menu_lateral">
        </div>
        <div class="corpo">
        </div>
      </div>
    </body>
    </html>

    arquivo css:

    body {
      margin: 0;
      background: url("fundo.png");
    }

    p,h1,h2,h3,h4,h5,h6 {
      margin: 0;
    }

    .conteudo {
      width: 960px;
      margin: 0 auto;
      display: table;
    }

    .topo {
      width: 960px;
      height: 300px;
      background: url("capa.png");
      margin: 0 auto;
    }

    .menu_lateral {
      width: 200px;
      height: 500px;
      background: #EDDA0B;
      float: left:
    }

    .corpo {
      width: 760px;
      height: 500px;
      background: #FFFFFF;
      float: left;
    }

    Compartilhar este post

    Link para o post
    Compartilhar em outros sites

    DiF    3.935

    DiF
    Postado

    veja este link: http://www.richardbarros.com.br/blog/css/css-truques-para-dominar-a-propriedade-float

    Compartilhar este post

    Link para o post
    Compartilhar em outros sites

    DiF    3.935

    DiF
    Postado

    Caso o autor do tópico necessite, o mesmo será reaberto, para isso deverá entrar em contato com a moderação solicitando o desbloqueio.

    Compartilhar este post

    Link para o post
    Compartilhar em outros sites
    Visitante
    Este tópico está impedido de receber novos posts.
    Entre para seguir isso  
    Seguidores 0
    Ir à lista de tópicos Programação web




    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×