Dois divs próximos um do outro, que somam 100% de largura - um aparece abaixo do outro?

StackOverflow https://stackoverflow.com/questions/4263336

Pergunta

Eu tenho uma div contêiner centralizada em 50% da largura da página. Isso tem preenchimento de 10px e posição relativa. Eu tenho então uma div dentro disso que está definida como largura 80%, flutuando à esquerda e é uma cor diferente e também possui preenchimento de 10px. Há outro conjunto de div para flutuar à direita, com largura 20%. Nenhuma das divs aninhadas tem uma borda ou margem. No entanto, o certo aparece abaixo do outro só até um tamanho de tela específico.

Meu HTML / CSS é o seguinte:

<html>
    <head>
        CSS file included here
    </head>
    <body>
        <div class="page-container">
            <div class="right-col"></div>
            <div class="left-col"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>


.page-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.left-col {
    width: 80%;
    float: left;
}

.right-col {
    width: 20%;
    float: right;
}

.clear {
    clear: both;
}

Isso está me incomodando há muito tempo, então eu apreciaria qualquer ajuda que alguém possa me dar. Desde já, obrigado.

Cumprimentos,

Richard

Foi útil?

Solução

Seu exemplo não contém preenchimento e parece o mesmo em qualquer tamanho de tela. Se você adicionar preenchimento à div, ele será adicionado à largura total, obtenha uma largura de 80% + 20px. Se o seu conteúdo na divisão esquerda precisar de um estofamento, adicione outra div dentro dele com uma margem de 10 px.

   <div class="page-container">
        <div class="right-col"></div>
        <div class="left-col">
            <div class="left-col-inner"></div>
        </div>
        <div class="clear"></div>
    </div>

CSS

.left-col-inner{
margin:10px;
}

Outras dicas

Tente especificar quase 100% de largura, por exemplo, 19,99% ou 79,99%.

Michael tem.

Se você deseja evitar a inserção de outro div dentro do Div.Left-Col, poderá dar toda a sua margem ou preenchimento imediato de crianças.

div.left-col > * {
    margin-left: 10px;
    margin-right: 10px;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top