Fisso - Liquido - Layout fisso

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

Domanda

Mi piacerebbe avere un [Fixed] [Fixed] layout di cross-browser [Liquido] compatibili.

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;
    }

Sarebbe questo lavoro / modo migliore per farlo?

Altri suggerimenti

Questo è abbastanza semplice.

Ecco il codice 

<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>

sto usando carri invece di posizione assoluta. Il vantaggio di utilizzare galleggianti sopra posizionamento assoluto è che si può mettere un div nother sotto di esso, diciamo il piè di pagina. E proprio dargli un clear: both e verrà visualizzato automaticamente in fondo alla pagina.

Ecco un esempio con un piè di pagina 

<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>

Voila! Tu hai il layout liquido.

check this out: http://siteroller.net/articles/3-column-no- tavoli-no-carri

Ma no, non credo che funzionerebbe. Ci sono un sacco di link in detto articolo se per affrontare il problema.

E se non v'è alcun interesse, io estendo ciò che è scritto lì.

Mi piace la risposta di Robert. Vorrei anche aggiungere un wrapper per sinistra, destra, centro e piè di pagina. Qui, ho impostato l'id di "pagina": 

<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>

Quindi, è possibile anche aggiungere lo stile per la "pagina": 

    #page {   
    min-width: 600px;   
    }

In questo modo, se l'utente si restringe il proprio browser verso il basso per una dimensione molto piccola, il contenuto sembra ancora buono.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top