Fixo - líquido - layout fixo

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

Pergunta

Eu gostaria de ter um layout [fixo] [líquido] [fixo] do navegador cruzado.

Html:

body
  div#col-1
  div#col-2
  div#col-3

CSS:

    #col-1 {
    width:150px;
    float:left;
    }
    #col-2 {
    width:100%;
    padding:0 150x;
    }
    #col-3 {
    positon:absolute:
    right:0;
    width:150px;
    }

Este trabalho/melhor maneira de fazer isso?

Outras dicas

Isso é bem simples.

Aqui está o código

<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>

Estou usando carros alegóricos em vez de posição absoluta. A vantagem de usar carros alegóricos acima do posicionamento absoluto é que você pode colocar uma divisão abaixo dela, digamos o rodapé. E apenas dê um claro: ambos e ele será exibido automaticamente na parte inferior da página.

Aqui está um exemplo com um rodapé

<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
#footer {
  clear: both;
  margin-top: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>

Pronto! Você tem seu layout líquido.

Veja isso:http://siteroller.net/articles/3-column-no-tables-no-floats

Mas não, acho que não funcionaria. Existem muitos links no referido artigo para resolver seu problema.

E se houver algum interesse, estenderei o que está escrito lá.

Eu gosto da resposta de Robert. Eu também adicionaria um invólucro ao redor da esquerda, direita, centro e rodapé. Aqui, eu defino o id como "página":

<body> 
    <div id="page"> 
        <div id="left">Text</div> 
        <div id="right">Text</div> 
        <div id="center">Text</div> 
        <div id="footer">footer</div> 
    </div>
</body>

Em seguida, você também pode adicionar o estilo para a "página":

    #page {   
    min-width: 600px;   
    }

Dessa forma, se o usuário diminuir o navegador para um tamanho muito pequeno, o conteúdo ainda parecerá bom.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top